@mui/x-data-grid 8.16.0 → 8.18.0

package/esm/components/panel/GridPreferencesPanel.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import { gridColumnDefinitionsSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";

package/esm/components/panel/filterPanel/GridFilterInputBoolean.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
 import { TextFieldProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputBooleanProps = GridFilterInputValueProps<TextFieldProps>;
-declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
+declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridFilterInputBoolean {
   var propTypes: any;
 }

package/esm/components/panel/filterPanel/GridFilterInputDate.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import { TextFieldProps } from "../../../models/gridBaseSlots.js";
 export type GridFilterInputDateProps = GridFilterInputValueProps<TextFieldProps> & {
   type?: 'date' | 'datetime-local';
 };
-declare function GridFilterInputDate(props: GridFilterInputDateProps): React.JSX.Element;
+declare function GridFilterInputDate(props: GridFilterInputDateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridFilterInputDate {
   var propTypes: any;
 }

package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -1,11 +1,10 @@
-import * as React from 'react';
 import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element | null;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridFilterInputMultipleSingleSelect {
   var propTypes: any;
 }

package/esm/components/panel/filterPanel/GridFilterInputMultipleValue.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { AutocompleteProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputMultipleValueProps = GridFilterInputValueProps<Omit<AutocompleteProps<string, true, false, true>, 'options'>> & {
   type?: 'text' | 'number' | 'date' | 'datetime-local';
 };
-declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): React.JSX.Element;
+declare function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridFilterInputMultipleValue {
   var propTypes: any;
 }

package/esm/components/panel/filterPanel/GridFilterInputSingleSelect.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { TextFieldProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps<TextFieldProps> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): React.JSX.Element | null;
+declare function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace GridFilterInputSingleSelect {
   var propTypes: any;
 }

package/esm/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { TextFieldProps } from "../../../models/gridBaseSlots.js";
 import { GridFilterItem } from "../../../models/gridFilterItem.js";
 import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
@@ -8,7 +7,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps<TextFieldP
 export type ItemPlusTag = GridFilterItem & {
   fromInput?: string;
 };
-declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
+declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridFilterInputValue {
   var propTypes: any;
 }

package/esm/components/quickFilter/QuickFilter.d.ts

@@ -57,7 +57,7 @@ export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'class
  *
  * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
  */
-declare function QuickFilter(props: QuickFilterProps): React.JSX.Element;
+declare function QuickFilter(props: QuickFilterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace QuickFilter {
   var propTypes: any;
 }

package/esm/components/toolbar/GridToolbar.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GridToolbarContainerProps } from "../containers/GridToolbarContainer.js";
 import { GridToolbarExportProps } from "./GridToolbarExport.js";
 import { GridToolbarQuickFilterProps } from "./GridToolbarQuickFilter.js";
@@ -16,5 +15,5 @@ export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbar
 /**
  * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
  */
-declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps> | React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridToolbar: import("react").ForwardRefExoticComponent<GridToolbarProps> | import("react").ForwardRefExoticComponent<GridToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
 export { GridToolbar };

package/esm/components/toolbar/GridToolbar.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";

package/esm/components/toolbar/GridToolbarExport.d.ts

@@ -27,11 +27,11 @@ export interface GridToolbarExportProps {
   };
   [x: `data-${string}`]: string;
 }
-declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): React.JSX.Element;
+declare function GridCsvExportMenuItem(props: GridCsvExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridCsvExportMenuItem {
   var propTypes: any;
 }
-declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): React.JSX.Element;
+declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridPrintExportMenuItem {
   var propTypes: any;
 }

package/esm/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { TextFieldProps } from "../../models/gridBaseSlots.js";
 import { GridFilterModel } from "../../models/gridFilterModel.js";
 export type GridToolbarQuickFilterProps = {
@@ -31,7 +30,7 @@ export type GridToolbarQuickFilterProps = {
 /**
  * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
  */
-declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
+declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridToolbarQuickFilter {
   var propTypes: any;
 }

package/esm/components/toolbar/GridToolbarQuickFilter.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"],
   _excluded2 = ["ref", "slotProps"];
-import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';

package/esm/components/toolbarV8/GridToolbar.d.ts

@@ -5,12 +5,12 @@ interface GridToolbarInternalProps {
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;
-declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): React.JSX.Element;
+declare function GridToolbarDivider(props: GridSlotProps['baseDivider']): import("react/jsx-runtime").JSX.Element;
 declare namespace GridToolbarDivider {
   var propTypes: any;
 }
-declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
-declare function GridToolbar(props: GridToolbarProps): React.JSX.Element;
+declare function GridToolbarLabel(props: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+declare function GridToolbar(props: GridToolbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace GridToolbar {
   var propTypes: any;
 }

package/esm/components/virtualization/GridBottomContainer.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export type GridBottomContainerProps = React.PropsWithChildren;
-export declare function GridBottomContainer(props: GridBottomContainerProps): React.JSX.Element;
+export declare function GridBottomContainer(props: GridBottomContainerProps): import("react/jsx-runtime").JSX.Element;

package/esm/components/virtualization/GridTopContainer.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function GridTopContainer(props: React.PropsWithChildren): React.JSX.Element;
+export declare function GridTopContainer(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/esm/components/virtualization/GridVirtualScroller.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export interface GridVirtualScrollerProps {
   children?: React.ReactNode;
 }
-declare function GridVirtualScroller(props: GridVirtualScrollerProps): React.JSX.Element;
+declare function GridVirtualScroller(props: GridVirtualScrollerProps): import("react/jsx-runtime").JSX.Element;
 export { GridVirtualScroller };

package/esm/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
 type Props = {
   /** The number of rows */
   rowsLength: number;
 };
 declare function GridVirtualScrollerFiller({
   rowsLength
-}: Props): React.JSX.Element | null;
+}: Props): import("react/jsx-runtime").JSX.Element | null;
 declare const Memoized: typeof GridVirtualScrollerFiller;
 export { Memoized as GridVirtualScrollerFiller };

package/esm/context/GridContextProvider.d.ts

@@ -13,5 +13,5 @@ export declare function GridContextProvider({
   configuration,
   props,
   children
-}: GridContextProviderProps): React.JSX.Element;
+}: GridContextProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -48,8 +48,8 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
   };
   visibleColumns: GridStateColDef[];
   columnPositions: number[];
-  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
-  getColumnHeadersRow: () => React.JSX.Element;
+  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => import("react/jsx-runtime").JSX.Element;
+  getColumnHeadersRow: () => import("react/jsx-runtime").JSX.Element;
   getColumnsToRender: (params?: GetHeadersParams) => {
     renderedColumns: GridStateColDef[];
     firstColumnToRender: number;

package/esm/hooks/features/pagination/useGridPaginationModel.js

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import debounce from '@mui/utils/debounce';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { gridFilterModelSelector, gridFilterActiveItemsSelector } from "../filter/gridFilterSelector.js";
 import { gridDensityFactorSelector } from "../density/index.js";
@@ -174,6 +175,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       });
     }
   }, [apiRef]);
+  const debouncedNavigateToStart = React.useMemo(() => debounce(navigateToStart, 0), [navigateToStart]);
 
   /**
    * Resets the page only if the active items or quick filter has changed from the last time.
@@ -190,12 +192,12 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     previousFilterModel.current = currentActiveFilters;
-    navigateToStart();
-  }, [apiRef, navigateToStart]);
+    debouncedNavigateToStart();
+  }, [apiRef, debouncedNavigateToStart]);
   useGridEvent(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridEvent(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridEvent(apiRef, 'rowCountChange', handleRowCountChange);
-  useGridEvent(apiRef, 'sortModelChange', navigateToStart);
+  useGridEvent(apiRef, 'sortModelChange', debouncedNavigateToStart);
   useGridEvent(apiRef, 'filterModelChange', handleFilterModelChange);
 
   /**

package/esm/hooks/features/rows/gridRowSpanningUtils.js

@@ -1,3 +1,4 @@
+import { getRowValue } from "./gridRowsUtils.js";
 export function getUnprocessedRange(testRange, processedRange) {
   if (testRange.firstRowIndex >= processedRange.firstRowIndex && testRange.lastRowIndex <= processedRange.lastRowIndex) {
     return null;
@@ -33,10 +34,12 @@ export const getCellValue = (row, colDef, apiRef) => {
   if (!row) {
     return null;
   }
-  let cellValue = row[colDef.field];
-  const valueGetter = colDef.rowSpanValueGetter ?? colDef.valueGetter;
-  if (valueGetter) {
-    cellValue = valueGetter(cellValue, row, colDef, apiRef);
+  const cellValue = row[colDef.field];
+  if (colDef.rowSpanValueGetter) {
+    return colDef.rowSpanValueGetter(cellValue, row, colDef, apiRef);
   }
-  return cellValue;
+
+  // This util is also called during the state initialization
+  // Use util method directly instead of calling apiRef.current.getRowValue
+  return getRowValue(row, colDef, apiRef);
 };

package/esm/hooks/features/rows/useGridParamsApi.js

@@ -40,18 +40,8 @@ export function useGridParamsApi(apiRef, props, configuration) {
     value: forcedValue,
     formattedValue: forcedFormattedValue
   }) => {
-    let value = row[field];
-    if (forcedValue !== undefined) {
-      value = forcedValue;
-    } else if (colDef?.valueGetter) {
-      value = colDef.valueGetter(value, row, colDef, apiRef);
-    }
-    let formattedValue = value;
-    if (forcedFormattedValue !== undefined) {
-      formattedValue = forcedFormattedValue;
-    } else if (colDef?.valueFormatter) {
-      formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
+    const value = forcedValue !== undefined ? forcedValue : apiRef.current.getRowValue(row, colDef);
+    const formattedValue = forcedFormattedValue !== undefined ? forcedFormattedValue : apiRef.current.getRowFormattedValue(row, colDef);
     const params = {
       id,
       field,

package/esm/hooks/utils/useGridApiRef.d.ts

@@ -1,7 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiCommon } from "../../models/index.js";
 import { GridApiCommunity } from "../../models/api/gridApiCommunity.js";
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => RefObject<Api | null>;
+export declare const useGridApiRef: () => RefObject<GridApiCommunity | null>;

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.16.0
+ * @mui/x-data-grid v8.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/demo/TailwindDemoContainer.d.ts

@@ -7,5 +7,5 @@ interface TailwindDemoContainerProps {
  * WARNING: This is an internal component used in documentation to inject the Tailwind script.
  * Please do not use it in your application.
  */
-export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/esm/locales/arSD.js

@@ -160,18 +160,18 @@ const arSDGrid = {
   collapseDetailPanel: 'طوي',
   // Pagination
   paginationRowsPerPage: 'عدد الصفوف في الصفحة:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `\u200E${to}-${from}\u200E من ${count !== -1 ? count : `أكثر من ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `حوالي ${estimated}` : `أكثر من ${to}`;
+    return `\u200E${to}-${from}\u200E من ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'انتقل إلى الصفحة الأولى';

package/esm/locales/caES.d.ts

@@ -0,0 +1,2 @@
+import { Localization } from "../utils/getGridLocalization.js";
+export declare const caES: Localization;