@mui/x-data-grid 8.0.0-alpha.5 → 8.0.0-alpha.7

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

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridLogicOperator } from "../../../models/gridFilterItem.js";
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
 import { GridPanelContent } from "../GridPanelContent.js";
@@ -19,7 +20,7 @@ const getGridFilter = col => ({
   operator: col.filterOperators[0].value,
   id: Math.round(Math.random() * 1e5)
 });
-const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+const GridFilterPanel = forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
@@ -141,9 +142,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       lastFilterRef.current.focus();
     }
   }, [validFilters.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsxs(GridPanelContent, {
       children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
         item: item,

package/modern/components/panel/filterPanel/index.js

@@ -2,7 +2,7 @@ export * from "./GridFilterForm.js";
 export * from "./GridFilterInputValue.js";
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
-export * from "./GridFilterInputBoolean.js";
+export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
 export * from "./GridFilterInputValueProps.js";
 export { GridFilterPanel } from "./GridFilterPanel.js";
 export * from "./GridFilterInputMultipleValue.js";

package/modern/components/toolbar/GridToolbar.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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";
 import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
 import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
@@ -11,7 +12,7 @@ import { GridToolbarExport } from "./GridToolbarExport.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+const GridToolbar = forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   const _ref = props,
@@ -27,9 +28,8 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions

package/modern/components/toolbar/GridToolbarColumnsButton.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -38,7 +39,6 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
       id: columnButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
@@ -48,6 +48,7 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {}),
       onClick: showColumns
     }, rootProps.slotProps?.baseButton, buttonProps, {
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -2,6 +2,7 @@ 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 { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -10,7 +11,7 @@ import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -83,7 +84,6 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
         size: "small",
         startIcon: startIcon,
         "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
@@ -93,6 +93,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         id: densityButtonId,
         onClick: handleDensitySelectorOpen
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/modern/components/toolbar/GridToolbarExport.js

@@ -5,6 +5,7 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
@@ -83,7 +84,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   })
 } : void 0;
-const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+const GridToolbarExport = forwardRef(function GridToolbarExport(props, ref) {
   const _ref = props,
     {
       csvOptions = {},

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -2,13 +2,14 @@ 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 { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+const GridToolbarExportContainer = forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
     children,
     slotProps = {}
@@ -44,7 +45,6 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
         size: "small",
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
         "aria-expanded": open,
@@ -54,6 +54,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         id: exportButtonId,
         onClick: handleMenuOpen
       }, rootProps.slotProps?.baseButton, buttonProps, {
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -3,6 +3,7 @@ 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 { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
@@ -34,7 +35,7 @@ const GridToolbarFilterListRoot = styled('ul', {
 
 // FIXME(v8:romgrk): override slotProps
 
-const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
+const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -100,7 +101,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
       id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
@@ -115,6 +115,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       })),
       onClick: toggleFilter
     }, rootProps.slotProps?.baseButton, buttonProps, {
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/modern/components/toolbar/GridToolbarQuickFilter.js

@@ -109,11 +109,11 @@ function GridToolbarQuickFilter(props) {
           "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
           size: "small",
           edge: "end",
-          sx: [searchValue ? {
+          style: searchValue ? {
             visibility: 'visible'
           } : {
             visibility: 'hidden'
-          }],
+          },
           onClick: handleSearchReset
         }, rootProps.slotProps?.baseIconButton, {
           children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {

package/modern/components/virtualization/GridMainContainer.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,16 +22,16 @@ const Element = styled('div', {
   display: 'flex',
   flexDirection: 'column'
 });
-export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+export const GridMainContainer = forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   const configuration = useGridConfiguration();
   const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/_jsxs(Element, _extends({
-    ref: ref,
     ownerState: rootProps,
     className: props.className,
     tabIndex: -1
   }, ariaAttributes, rootProps.slotProps?.main, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GridPanelAnchor, {
       role: "presentation",
       "data-id": "gridPanelAnchor"

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useOnMount } from "../../hooks/utils/useOnMount.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.js";
@@ -52,7 +53,7 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   },
   bottom: '0px'
 });
-const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
+const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const isLocked = React.useRef(false);

package/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,15 +21,14 @@ const VirtualScrollerContentRoot = styled('div', {
   slot: 'VirtualScrollerContent',
   overridesResolver: (props, styles) => styles.virtualScrollerContent
 })({});
-const GridVirtualScrollerContent = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerContent(props, ref) {
+const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
   const rootProps = useGridRootProps();
   const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
   const classes = useUtilityClasses(rootProps, overflowedContent);
-  return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({
-    ref: ref
-  }, props, {
+  return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
     ownerState: rootProps,
-    className: clsx(classes.root, props.className)
+    className: clsx(classes.root, props.className),
+    ref: ref
   }));
 });
 export { GridVirtualScrollerContent };

package/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
@@ -31,7 +32,7 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   // Prevents margin collapsing when using `getRowSpacing`
   flexDirection: 'column'
 });
-const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
   const {
       className
     } = props,
@@ -45,12 +46,13 @@ const GridVirtualScrollerRenderZone = /*#__PURE__*/React.forwardRef(function Gri
     return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
   });
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
-    ref: ref,
     className: clsx(classes.root, className),
     ownerState: rootProps,
     style: {
       transform: `translate3d(0, ${offsetTop}px, 0)`
     }
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 export { GridVirtualScrollerRenderZone };

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeApplier(group, id.current, callback);

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
-  const cleanup = React.useRef();
+  const cleanup = React.useRef(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
   const registerPreProcessor = React.useCallback(() => {
     cleanup.current = apiRef.current.registerPipeProcessor(group, id.current, callback);

package/modern/hooks/core/useGridApiInitialization.js

@@ -68,8 +68,8 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
-  const publicApiRef = React.useRef();
-  const privateApiRef = React.useRef();
+  const publicApiRef = React.useRef(null);
+  const privateApiRef = React.useRef(null);
   if (!privateApiRef.current) {
     privateApiRef.current = createPrivateAPI(publicApiRef);
   }

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -70,7 +70,7 @@ function preventClick(event) {
  * is disabled.
  */
 function useColumnVirtualizationDisabled(apiRef) {
-  const promise = React.useRef();
+  const promise = React.useRef(undefined);
   const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
   const value = useGridSelector(apiRef, selector);
   React.useEffect(() => {
@@ -184,10 +184,10 @@ export const useGridColumnResize = (apiRef, props) => {
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
-  const initialOffsetToSeparator = React.useRef();
-  const resizeDirection = React.useRef();
+  const initialOffsetToSeparator = React.useRef(null);
+  const resizeDirection = React.useRef(null);
   const stopResizeEventTimeout = useTimeout();
-  const touchId = React.useRef();
+  const touchId = React.useRef(undefined);
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
     const prevWidth = refs.columnHeaderElement.offsetWidth;

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef();
+  const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,

package/modern/hooks/features/export/useGridPrintExport.js

@@ -44,7 +44,7 @@ export const useGridPrintExport = (apiRef, props) => {
   const previousGridState = React.useRef(null);
   const previousColumnVisibility = React.useRef({});
   const previousRows = React.useRef([]);
-  const previousVirtualizationState = React.useRef();
+  const previousVirtualizationState = React.useRef(null);
   React.useEffect(() => {
     doc.current = ownerDocument(apiRef.current.rootElementRef.current);
   }, [apiRef, hasRootReference]);

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -15,8 +15,8 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  */
 export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
+  const hideTimeout = React.useRef(undefined);
+  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS