@mui/x-data-grid 8.3.1 → 8.5.0

package/esm/components/columnSelection/GridCellCheckboxRenderer.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["field", "id", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -86,6 +86,7 @@ const GridCellCheckboxForwardRef = forwardRef(function GridCellCheckboxRenderer(
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridCellCheckboxForwardRef.displayName = "GridCellCheckboxForwardRef";
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/columnSelection/GridHeaderCheckbox.js

@@ -156,6 +156,7 @@ const GridHeaderCheckbox = forwardRef(function GridHeaderCheckbox(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridHeaderCheckbox.displayName = "GridHeaderCheckbox";
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -173,7 +173,7 @@ function GridColumnsManagement(props) {
           className: classes.row,
           disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
-          onClick: toggleColumn,
+          onChange: toggleColumn,
           name: column.field,
           inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined,
           label: column.headerName || column.field,
@@ -191,7 +191,7 @@ function GridColumnsManagement(props) {
         disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
-        onClick: () => toggleAllColumns(!allHideableColumnsVisible),
+        onChange: () => toggleAllColumns(!allHideableColumnsVisible),
         name: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         label: apiRef.current.getLocaleText('columnsManagementShowHideAllText'),
         density: "compact"

package/esm/components/columnsPanel/ColumnsPanelTrigger.js

@@ -75,6 +75,7 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ColumnsPanelTrigger.displayName = "ColumnsPanelTrigger";
 process.env.NODE_ENV !== "production" ? ColumnsPanelTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/containers/GridFooterContainer.js

@@ -43,6 +43,7 @@ const GridFooterContainer = forwardRef(function GridFooterContainer(props, ref)
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFooterContainer.displayName = "GridFooterContainer";
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/containers/GridOverlay.js

@@ -50,6 +50,7 @@ const GridOverlay = forwardRef(function GridOverlay(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridOverlay.displayName = "GridOverlay";
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/containers/GridRoot.js

@@ -4,7 +4,9 @@ const _excluded = ["className", "children", "sidePanel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_useForkRef as useForkRef, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
+import capitalize from '@mui/utils/capitalize';
+import composeClasses from '@mui/utils/composeClasses';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridRootStyles } from "./GridRootStyles.js";
@@ -68,6 +70,7 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
     }), sidePanel, cssVariables.tag]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridRoot.displayName = "GridRoot";
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/containers/GridRootStyles.js

@@ -657,7 +657,7 @@ export const GridRootStyles = styled('div', {
         borderTop: 'none'
       }
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
@@ -715,7 +715,7 @@ export const GridRootStyles = styled('div', {
       opacity: vars.colors.interactive.disabledOpacity
     },
     [`& .${c['rowReorderCell--draggable']}`]: {
-      cursor: 'move',
+      cursor: 'grab',
       opacity: 1
     },
     [`& .${c.rowReorderCellContainer}`]: {

package/esm/components/containers/GridToolbarContainer.js

@@ -56,6 +56,7 @@ const GridToolbarContainer = forwardRef(function GridToolbarContainer(props, ref
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarContainer.displayName = "GridToolbarContainer";
 process.env.NODE_ENV !== "production" ? GridToolbarContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/export/ExportCsv.js

@@ -42,6 +42,7 @@ const ExportCsv = forwardRef(function ExportCsv(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ExportCsv.displayName = "ExportCsv";
 process.env.NODE_ENV !== "production" ? ExportCsv.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/export/ExportPrint.js

@@ -42,6 +42,7 @@ const ExportPrint = forwardRef(function ExportPrint(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ExportPrint.displayName = "ExportPrint";
 process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/filterPanel/FilterPanelTrigger.js

@@ -78,6 +78,7 @@ const FilterPanelTrigger = forwardRef(function FilterPanelTrigger(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") FilterPanelTrigger.displayName = "FilterPanelTrigger";
 process.env.NODE_ENV !== "production" ? FilterPanelTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/menu/GridMenu.js

@@ -4,7 +4,9 @@ const _excluded = ["open", "target", "onClose", "children", "position", "classNa
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import HTMLElementType from '@mui/utils/HTMLElementType';
 import { styled } from '@mui/material/styles';
 import { vars } from "../../constants/cssVariables.js";
 import { useCSSVariablesClass } from "../../utils/css/context.js";

package/esm/components/menu/columnMenu/GridColumnMenu.js

@@ -45,6 +45,7 @@ const GridGenericColumnMenu = forwardRef(function GridGenericColumnMenu(props, r
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridGenericColumnMenu.displayName = "GridGenericColumnMenu";
 process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -84,6 +85,7 @@ const GridColumnMenu = forwardRef(function GridColumnMenu(props, ref) {
     defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnMenu.displayName = "GridColumnMenu";
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -45,6 +45,7 @@ const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(prop
     children: children
   }));
 });
+if (process.env.NODE_ENV !== "production") GridColumnMenuContainer.displayName = "GridColumnMenuContainer";
 process.env.NODE_ENV !== "production" ? GridColumnMenuContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/panel/GridPanel.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
-import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from "../../constants/cssVariables.js";
@@ -87,6 +87,7 @@ const GridPanel = forwardRef((props, ref) => {
     })
   }));
 });
+if (process.env.NODE_ENV !== "production") GridPanel.displayName = "GridPanel";
 process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/panel/GridPanelContext.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridPanelContext.displayName = "GridPanelContext";
 export function useGridPanelContext() {
   const context = React.useContext(GridPanelContext);
   if (context === undefined) {

package/esm/components/panel/GridPanelWrapper.js

@@ -44,4 +44,5 @@ const GridPanelWrapper = forwardRef(function GridPanelWrapper(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridPanelWrapper.displayName = "GridPanelWrapper";
 export { GridPanelWrapper };

package/esm/components/panel/filterPanel/GridFilterForm.js

@@ -5,7 +5,9 @@ const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterCha
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
+import capitalize from '@mui/utils/capitalize';
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from "../../../constants/cssVariables.js";
@@ -359,6 +361,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
     }))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFilterForm.displayName = "GridFilterForm";
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -3,7 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { refType, unstable_useId as useId } from '@mui/utils';
+import refType from '@mui/utils/refType';
+import useId from '@mui/utils/useId';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridFilterInputBoolean(props) {

package/esm/components/panel/filterPanel/GridFilterInputDate.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/utils';
+import useId from '@mui/utils/useId';
 import { useTimeout } from "../../../hooks/utils/useTimeout.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/utils';
+import useId from '@mui/utils/useId';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/utils';
+import useId from '@mui/utils/useId';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputMultipleValue(props) {

package/esm/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/utils';
+import useId from '@mui/utils/useId';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { createElement as _createElement } from "react";

package/esm/components/panel/filterPanel/GridFilterInputValue.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "slotProps", "clearButton", "headerFilterMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId } from '@mui/utils';
+import useId from '@mui/utils/useId';
 import { useTimeout } from "../../../hooks/utils/useTimeout.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/components/panel/filterPanel/GridFilterPanel.js

@@ -184,6 +184,7 @@ const GridFilterPanel = forwardRef(function GridFilterPanel(props, ref) {
     }) : null]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFilterPanel.displayName = "GridFilterPanel";
 process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/quickFilter/QuickFilter.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render", "className", "parser", "formatter", "debounceMs", "defaultExpanded", "expanded", "onExpandedChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_debounce as debounce } from '@mui/utils';
+import debounce from '@mui/utils/debounce';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useId from '@mui/utils/useId';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';

package/esm/components/quickFilter/QuickFilterClear.js

@@ -48,6 +48,7 @@ const QuickFilterClear = forwardRef(function QuickFilterClear(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") QuickFilterClear.displayName = "QuickFilterClear";
 process.env.NODE_ENV !== "production" ? QuickFilterClear.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/quickFilter/QuickFilterContext.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export const QuickFilterContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") QuickFilterContext.displayName = "QuickFilterContext";
 export function useQuickFilterContext() {
   const context = React.useContext(QuickFilterContext);
   if (context === undefined) {

package/esm/components/quickFilter/QuickFilterControl.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render", "className", "slotProps", "onKeyDown", "onChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
@@ -85,6 +85,7 @@ const QuickFilterControl = forwardRef(function QuickFilterControl(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") QuickFilterControl.displayName = "QuickFilterControl";
 process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/quickFilter/QuickFilterTrigger.js

@@ -4,7 +4,7 @@ const _excluded = ["render", "className", "onClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { useQuickFilterContext } from "./QuickFilterContext.js";
@@ -53,6 +53,7 @@ const QuickFilterTrigger = forwardRef(function QuickFilterTrigger(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") QuickFilterTrigger.displayName = "QuickFilterTrigger";
 process.env.NODE_ENV !== "production" ? QuickFilterTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbar/GridToolbar.js

@@ -49,6 +49,7 @@ const GridToolbar = forwardRef(function GridToolbar(props, ref) {
     }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbar.displayName = "GridToolbar";
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbar/GridToolbarColumnsButton.js

@@ -68,6 +68,7 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarColumnsButton.displayName = "GridToolbarColumnsButton";
 process.env.NODE_ENV !== "production" ? GridToolbarColumnsButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbar/GridToolbarDensitySelector.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import useId from '@mui/utils/useId';
+import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
@@ -115,6 +116,7 @@ const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelecto
     })]
   });
 });
+if (process.env.NODE_ENV !== "production") GridToolbarDensitySelector.displayName = "GridToolbarDensitySelector";
 process.env.NODE_ENV !== "production" ? GridToolbarDensitySelector.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbar/GridToolbarExport.js

@@ -112,6 +112,7 @@ const GridToolbarExport = forwardRef(function GridToolbarExport(props, ref) {
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarExport.displayName = "GridToolbarExport";
 process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbar/GridToolbarExportContainer.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import useId from '@mui/utils/useId';
+import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -80,6 +81,7 @@ const GridToolbarExportContainer = forwardRef(function GridToolbarExportContaine
     })]
   });
 });
+if (process.env.NODE_ENV !== "production") GridToolbarExportContainer.displayName = "GridToolbarExportContainer";
 process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbar/GridToolbarFilterButton.js

@@ -2,7 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import capitalize from '@mui/utils/capitalize';
+import useId from '@mui/utils/useId';
 import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars } from "../../constants/cssVariables.js";
@@ -130,6 +132,7 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarFilterButton.displayName = "GridToolbarFilterButton";
 process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbarV8/Toolbar.js

@@ -12,6 +12,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
 import { ToolbarContext } from "./ToolbarContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { sortByDocumentPosition } from "./utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -59,21 +60,11 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   const classes = useUtilityClasses(rootProps);
   const [focusableItemId, setFocusableItemId] = React.useState(null);
   const [items, setItems] = React.useState([]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-    if (focusableItemId === id) {
-      setFocusableItemId(null);
-    }
-  }, [focusableItemId]);
+  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
   const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
     let index = startIndex;
-    const itemCount = items.length;
+    const sortedItems = getSortedItems();
+    const itemCount = sortedItems.length;
 
     // Look for enabled items in the specified direction
     for (let i = 0; i < itemCount; i += 1) {
@@ -93,53 +84,93 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
       }
 
       // Return if we found an enabled item
-      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
+      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
         return index;
       }
     }
 
     // If we've checked all items and found none enabled
     return -1;
-  }, [items]);
+  }, [getSortedItems]);
+  const registerItem = React.useCallback((id, itemRef) => {
+    setItems(prevItems => [...prevItems, {
+      id,
+      ref: itemRef
+    }]);
+  }, []);
+  const unregisterItem = React.useCallback(id => {
+    setItems(prevItems => prevItems.filter(i => i.id !== id));
+  }, []);
   const onItemKeyDown = React.useCallback(event => {
     if (!focusableItemId) {
       return;
     }
-    const currentIndex = items.findIndex(item => item.id === focusableItemId);
+    const sortedItems = getSortedItems();
+    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
     let newIndex = -1;
     if (event.key === 'ArrowRight') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, 1);
+      newIndex = findEnabledItem(focusableItemIndex, 1);
     } else if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, -1);
+      newIndex = findEnabledItem(focusableItemIndex, -1);
     } else if (event.key === 'Home') {
       event.preventDefault();
       newIndex = findEnabledItem(-1, 1, false);
     } else if (event.key === 'End') {
       event.preventDefault();
-      newIndex = findEnabledItem(items.length, -1, false);
+      newIndex = findEnabledItem(sortedItems.length, -1, false);
     }
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+
+    // TODO: Check why this is necessary
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, focusableItemId, findEnabledItem]);
+  }, [getSortedItems, focusableItemId, findEnabledItem]);
   const onItemFocus = React.useCallback(id => {
     if (focusableItemId !== id) {
       setFocusableItemId(id);
     }
-  }, [focusableItemId]);
+  }, [focusableItemId, setFocusableItemId]);
   const onItemDisabled = React.useCallback(id => {
-    const currentIndex = items.findIndex(item => item.id === id);
+    const sortedItems = getSortedItems();
+    const currentIndex = sortedItems.findIndex(item => item.id === id);
     const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, findEnabledItem]);
+  }, [getSortedItems, findEnabledItem]);
+  React.useEffect(() => {
+    const sortedItems = getSortedItems();
+    if (sortedItems.length > 0) {
+      // Set initial focusable item
+      if (!focusableItemId) {
+        setFocusableItemId(sortedItems[0].id);
+        return;
+      }
+      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
+      if (!sortedItems[focusableItemIndex]) {
+        // Last item has been removed from the items array
+        const item = sortedItems[sortedItems.length - 1];
+        if (item) {
+          setFocusableItemId(item.id);
+          item.ref.current?.focus();
+        }
+      } else if (focusableItemIndex === -1) {
+        // Focused item has been removed from the items array
+        const item = sortedItems[focusableItemIndex];
+        if (item) {
+          setFocusableItemId(item.id);
+          item.ref.current?.focus();
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSortedItems, findEnabledItem]);
   const contextValue = React.useMemo(() => ({
     focusableItemId,
     registerItem,
@@ -156,16 +187,12 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }, other, {
     ref
   }));
-  React.useEffect(() => {
-    if (items.length > 0) {
-      setFocusableItemId(items[0].id);
-    }
-  }, [items]);
   return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
     value: contextValue,
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") Toolbar.displayName = "Toolbar";
 process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |