@mui/x-data-grid 8.3.1 → 8.5.0

package/components/panel/GridPanelWrapper.js

@@ -51,4 +51,5 @@ const GridPanelWrapper = exports.GridPanelWrapper = (0, _forwardRef.forwardRef)(
   }, other, {
     ref: ref
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridPanelWrapper.displayName = "GridPanelWrapper";

package/components/panel/filterPanel/GridFilterForm.js

@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../../constants/cssVariables");
@@ -40,7 +42,7 @@ const useUtilityClasses = ownerState => {
     operatorInput: ['filterFormOperatorInput'],
     valueInput: ['filterFormValueInput']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -120,10 +122,10 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
   const columnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
-  const columnSelectId = (0, _utils.unstable_useId)();
-  const columnSelectLabelId = (0, _utils.unstable_useId)();
-  const operatorSelectId = (0, _utils.unstable_useId)();
-  const operatorSelectLabelId = (0, _utils.unstable_useId)();
+  const columnSelectId = (0, _useId.default)();
+  const columnSelectLabelId = (0, _useId.default)();
+  const operatorSelectId = (0, _useId.default)();
+  const operatorSelectLabelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
@@ -348,7 +350,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         native: isBaseSelectNative,
         key: operator.value,
         value: operator.value
-      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
+      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _capitalize.default)(operator.value)}`)))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({}, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
@@ -367,6 +369,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
     }))]
   }));
 });
+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/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -11,7 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "slotProps"];
@@ -29,8 +30,8 @@ function GridFilterInputBoolean(props) {
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const labelId = (0, _utils.unstable_useId)();
-  const selectId = (0, _utils.unstable_useId)();
+  const labelId = (0, _useId.default)();
+  const selectId = (0, _useId.default)();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -99,7 +100,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
-  focusElementRef: _utils.refType,
+  focusElementRef: _refType.default,
   headerFilterMenu: _propTypes.default.node,
   inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: (props, propName) => {

package/components/panel/filterPanel/GridFilterInputDate.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,7 +53,7 @@ function GridFilterInputDate(props) {
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(() => convertFilterItemValueToInputValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     filterTimeout.clear();

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +25,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   let resolvedColumn = null;
   if (item.field) {

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -9,7 +9,7 @@ exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridFilterInputMultipleValue(props) {
@@ -21,7 +21,7 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -52,8 +52,8 @@ function GridFilterInputSingleSelect(props) {
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
-  const id = (0, _utils.unstable_useId)();
-  const labelId = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
+  const labelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
   let resolvedColumn = null;

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,7 +33,7 @@ function GridFilterInputValue(props) {
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     const value = sanitizeFilterItemValue(event.target.value);

package/components/panel/filterPanel/GridFilterPanel.js

@@ -193,6 +193,7 @@ const GridFilterPanel = exports.GridFilterPanel = (0, _forwardRef.forwardRef)(fu
     }) : 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/components/quickFilter/QuickFilter.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
@@ -107,7 +107,7 @@ function QuickFilter(props) {
       previousExpandedValue.current = expandedValue;
     }
   }, [expandedValue]);
-  const setQuickFilterValueDebounced = React.useMemo(() => (0, _utils.unstable_debounce)(newValue => {
+  const setQuickFilterValueDebounced = React.useMemo(() => (0, _debounce.default)(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
     apiRef.current.setQuickFilterValues(newQuickFilterValues);

package/components/quickFilter/QuickFilterClear.js

@@ -56,6 +56,7 @@ const QuickFilterClear = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(
     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/components/quickFilter/QuickFilterContext.js

@@ -8,6 +8,7 @@ exports.QuickFilterContext = void 0;
 exports.useQuickFilterContext = useQuickFilterContext;
 var React = _interopRequireWildcard(require("react"));
 const QuickFilterContext = exports.QuickFilterContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") QuickFilterContext.displayName = "QuickFilterContext";
 function useQuickFilterContext() {
   const context = React.useContext(QuickFilterContext);
   if (context === undefined) {

package/components/quickFilter/QuickFilterControl.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
@@ -48,7 +48,7 @@ const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardR
     clearValue
   } = (0, _QuickFilterContext.useQuickFilterContext)();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
-  const handleRef = (0, _utils.unstable_useForkRef)(controlRef, ref);
+  const handleRef = (0, _useForkRef.default)(controlRef, ref);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       if (state.value === '') {
@@ -93,6 +93,7 @@ const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardR
     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/components/quickFilter/QuickFilterTrigger.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
@@ -44,7 +44,7 @@ const QuickFilterTrigger = exports.QuickFilterTrigger = (0, _forwardRef.forwardR
     triggerRef
   } = (0, _QuickFilterContext.useQuickFilterContext)();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
-  const handleRef = (0, _utils.unstable_useForkRef)(triggerRef, ref);
+  const handleRef = (0, _useForkRef.default)(triggerRef, ref);
   const handleClick = event => {
     onExpandedChange(!state.expanded);
     onClick?.(event);
@@ -61,6 +61,7 @@ const QuickFilterTrigger = exports.QuickFilterTrigger = (0, _forwardRef.forwardR
     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/components/toolbar/GridToolbar.js

@@ -18,7 +18,7 @@ var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
 var _GridToolbarExport = require("./GridToolbarExport");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
-var _GridToolbar = require("../toolbarV8/GridToolbar");
+var _GridToolbar2 = require("../toolbarV8/GridToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 /**
@@ -42,7 +42,7 @@ const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function G
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({}, other, {
     ref: ref,
-    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbar.GridToolbarLabel, {
+    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbar2.GridToolbarLabel, {
       children: rootProps.label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
@@ -57,6 +57,7 @@ const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function G
     }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, 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/components/toolbar/GridToolbarColumnsButton.js

@@ -76,6 +76,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
     }))
   }));
 });
+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/components/toolbar/GridToolbarDensitySelector.js

@@ -9,7 +9,8 @@ exports.GridToolbarDensitySelector = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _keyboardUtils = require("../../utils/keyboardUtils");
@@ -31,11 +32,11 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
-  const densityButtonId = (0, _utils.unstable_useId)();
-  const densityMenuId = (0, _utils.unstable_useId)();
+  const densityButtonId = (0, _useId.default)();
+  const densityMenuId = (0, _useId.default)();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
+  const handleRef = (0, _useForkRef.default)(ref, buttonRef);
   const densityOptions = [{
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityCompactIcon, {}),
     label: apiRef.current.getLocaleText('toolbarDensityCompact'),
@@ -123,6 +124,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
     })]
   });
 });
+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/components/toolbar/GridToolbarExport.js

@@ -122,6 +122,7 @@ const GridToolbarExport = exports.GridToolbarExport = (0, _forwardRef.forwardRef
     }))
   }));
 });
+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/components/toolbar/GridToolbarExportContainer.js

@@ -9,7 +9,8 @@ exports.GridToolbarExportContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -26,11 +27,11 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const exportButtonId = (0, _utils.unstable_useId)();
-  const exportMenuId = (0, _utils.unstable_useId)();
+  const exportButtonId = (0, _useId.default)();
+  const exportMenuId = (0, _useId.default)();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
+  const handleRef = (0, _useForkRef.default)(ref, buttonRef);
   const handleMenuOpen = event => {
     setOpen(prevOpen => !prevOpen);
     buttonProps.onClick?.(event);
@@ -88,6 +89,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
     })]
   });
 });
+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/components/toolbar/GridToolbarFilterButton.js

@@ -10,7 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../constants/cssVariables");
@@ -31,7 +33,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['toolbarFilterList']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
@@ -56,8 +58,8 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
   const lookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const classes = useUtilityClasses(rootProps);
-  const filterButtonId = (0, _utils.unstable_useId)();
-  const filterPanelId = (0, _utils.unstable_useId)();
+  const filterButtonId = (0, _useId.default)();
+  const filterPanelId = (0, _useId.default)();
   const {
     filterPanelTriggerRef
   } = (0, _GridPanelContext.useGridPanelContext)();
@@ -69,7 +71,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
     if (activeFilters.length === 0) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipShow');
     }
-    const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(item.operator)}`).toString();
+    const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${(0, _capitalize.default)(item.operator)}`).toString();
     const getFilterItemValue = item => {
       const {
         getValueAsString
@@ -138,6 +140,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
     }))
   }));
 });
+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/components/toolbarV8/Toolbar.js

@@ -19,6 +19,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _ToolbarContext = require("./ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className"];
 const useUtilityClasses = ownerState => {
@@ -67,21 +68,11 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   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(_utils.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) {
@@ -101,53 +92,93 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
       }
 
       // 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,
@@ -164,16 +195,12 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   }, other, {
     ref
   }));
-  React.useEffect(() => {
-    if (items.length > 0) {
-      setFocusableItemId(items[0].id);
-    }
-  }, [items]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.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 |

package/components/toolbarV8/ToolbarButton.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -42,7 +42,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
   const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const buttonRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(buttonRef, ref);
+  const handleRef = (0, _useForkRef.default)(buttonRef, ref);
   const {
     focusableItemId,
     registerItem,
@@ -91,6 +91,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |