@mui/x-data-grid 9.10.1 → 9.12.0

package/components/panel/filterPanel/GridFilterInputSingleSelect.mjs

@@ -15,12 +15,23 @@ const renderSingleSelectOptions = ({
   getOptionLabel,
   getOptionValue,
   isSelectNative,
-  baseSelectOptionProps
+  baseSelectOptionProps,
+  blankOptionLabel
 }) => {
-  const iterableColumnValues = ['', ...(getValueOptions(column) || [])];
-  return iterableColumnValues.map(option => {
-    const value = getOptionValue(option);
-    let label = getOptionLabel(option);
+  const valueOptions = getValueOptions(column) || [];
+
+  // A column that declares its own blank entry already offers a way to reset the filter.
+  // Prepending another one would render two options sharing the same `''` key.
+  const declaresBlankOption = valueOptions.some(option => {
+    const optionValue = getOptionValue(option);
+    return optionValue === '' || optionValue === null || optionValue === undefined;
+  });
+  const iterableColumnValues = declaresBlankOption ? valueOptions : ['', ...valueOptions];
+  return iterableColumnValues.map((option, index) => {
+    // The prepended entry is ours, not a value option, so it skips the column accessors.
+    const isBlankOption = !declaresBlankOption && index === 0;
+    const value = isBlankOption ? '' : getOptionValue(option);
+    let label = isBlankOption ? blankOptionLabel : getOptionLabel(option);
     if (label === '') {
       label = ' '; // To force the height of the empty option
     }
@@ -90,7 +101,8 @@ function GridFilterInputSingleSelect(props) {
         getOptionLabel,
         getOptionValue,
         isSelectNative,
-        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption,
+        blankOptionLabel: apiRef.current.getLocaleText('filterValueAny')
       })
     })), headerFilterMenu, clearButton]
   });

package/components/toolbarV8/Toolbar.js

@@ -16,11 +16,10 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
-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,127 +66,6 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const getSortedItems = React.useCallback(() => items.sort(_utils.sortByDocumentPosition), [items]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const sortedItems = getSortedItems();
-    const itemCount = sortedItems.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      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;
-  }, [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 sortedItems = getSortedItems();
-    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      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(sortedItems.length, -1, false);
-    }
-
-    // TODO: Check why this is necessary
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId, setFocusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const sortedItems = getSortedItems();
-    const currentIndex = sortedItems.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [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,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -196,8 +74,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   }, other, {
     ref
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
-    value: contextValue,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContextProvider, {
     children: element
   });
 });

package/components/toolbarV8/Toolbar.mjs

@@ -10,11 +10,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
 import { vars } from "../../constants/cssVariables.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
-import { ToolbarContext } from "./ToolbarContext.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { sortByDocumentPosition } from "./utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -60,127 +59,6 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const sortedItems = getSortedItems();
-    const itemCount = sortedItems.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      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;
-  }, [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 sortedItems = getSortedItems();
-    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      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(sortedItems.length, -1, false);
-    }
-
-    // TODO: Check why this is necessary
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId, setFocusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const sortedItems = getSortedItems();
-    const currentIndex = sortedItems.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [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,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = useComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -189,8 +67,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }, other, {
     ref
   }));
-  return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
-    value: contextValue,
+  return /*#__PURE__*/_jsx(ToolbarContextProvider, {
     children: element
   });
 });

package/components/toolbarV8/ToolbarButton.js

@@ -12,13 +12,13 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _ToolbarContext = require("./ToolbarContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 /**
  * A button for performing actions from the toolbar.
  * It renders the `baseIconButton` slot.
@@ -33,59 +33,20 @@ const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"
  */
 const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const buttonRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = (0, _ToolbarContext.useToolbarContext)();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
+  const _useRegisterToolbarBu = (0, _ToolbarContext.useRegisterToolbarButton)(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useRegisterToolbarBu, _excluded2);
   const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {

package/components/toolbarV8/ToolbarButton.mjs

@@ -2,15 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useRegisterToolbarButton } from '@mui/x-internals/ToolbarContext';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { useToolbarContext } from "./ToolbarContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button for performing actions from the toolbar.
@@ -26,59 +26,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const id = useId();
   const rootProps = useGridRootProps();
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = useToolbarContext();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
+  const _useRegisterToolbarBu = useRegisterToolbarButton(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = _objectWithoutPropertiesLoose(_useRegisterToolbarBu, _excluded2);
   const element = useComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {

package/constants/gridClasses.d.mts

@@ -83,6 +83,18 @@ export interface GridClasses {
    * Styles applied to the aggregation row overlay wrapper.
    */
   aggregationRowOverlayWrapper: string;
+  /**
+   * Styles applied to the A1-notation column-letter adornment in the column header (Premium formulas).
+   */
+  formulaColumnHeaderLetter: string;
+  /**
+   * Styles applied to the cells of the A1-notation row-number column (Premium formulas).
+   */
+  formulaRowNumberCell: string;
+  /**
+   * Styles applied to the formula bar root element (Premium formulas).
+   */
+  formulaBar: string;
   /**
    * Styles applied to the root element if `autoHeight={true}`.
    */

package/constants/gridClasses.d.ts

@@ -83,6 +83,18 @@ export interface GridClasses {
    * Styles applied to the aggregation row overlay wrapper.
    */
   aggregationRowOverlayWrapper: string;
+  /**
+   * Styles applied to the A1-notation column-letter adornment in the column header (Premium formulas).
+   */
+  formulaColumnHeaderLetter: string;
+  /**
+   * Styles applied to the cells of the A1-notation row-number column (Premium formulas).
+   */
+  formulaRowNumberCell: string;
+  /**
+   * Styles applied to the formula bar root element (Premium formulas).
+   */
+  formulaBar: string;
   /**
    * Styles applied to the root element if `autoHeight={true}`.
    */

package/constants/gridClasses.js

@@ -30,4 +30,4 @@ const gridClassesOverrides = exports.gridClassesOverrides = {
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'formulaColumnHeaderLetter', 'formulaRowNumberCell', 'formulaBar', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/gridClasses.mjs

@@ -22,4 +22,4 @@ export const gridClassesOverrides = {
   // TODO v9: Rename to `cell--dragging`
   'row--dragging', 'row--dynamicHeight', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderCellContainer', 'rowReorderCellPlaceholder', 'rowSkeleton', 'scrollbar', 'scrollbar--horizontal', 'scrollbar--vertical', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'sortIcon', 'treeDataGroupingCell', 'treeDataGroupingCellLoadingContainer', 'treeDataGroupingCellToggle', 'withBorderColor', 'row--beingDragged']
 };
-export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', [...gridClassesOverrides.root, ...gridClassesOverrides.children, 'aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'formulaColumnHeaderLetter', 'formulaRowNumberCell', 'formulaBar', 'mainContent', 'withSidePanel', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderTitle', 'columnHeaders', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'contentFiller', 'detailPanel', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editInputCell', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', 'multiSelectCell', 'multiSelectCellChip', 'multiSelectCellChip--hidden', 'multiSelectCellOverflow', 'multiSelectCellPopup', 'multiSelectCellPopperContent', 'editMultiSelectCell', 'editMultiSelectCellChip', 'editMultiSelectCellChip--hidden', 'editMultiSelectCellOverflow', 'editMultiSelectCellPopup', 'editMultiSelectCellPopperContent', 'filler', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filler--horizontal', 'footerContainer', 'iconButtonContainer', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'overlay', 'overlayWrapper', 'root', 'virtualizer--layoutControlled', 'rowCount', 'rowReorderIcon', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);

package/constants/localeTextConstants.js

@@ -47,6 +47,10 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
+  // Formula bar (Premium formulas)
+  formulaBarLabel: 'Formula bar',
+  formulaBarInputLabel: 'Formula',
+  formulaBarAddressLabel: 'Active cell',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',

package/constants/localeTextConstants.mjs

@@ -41,6 +41,10 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarCharts: 'Charts',
   // Toolbar AI Assistant button
   toolbarAssistant: 'AI Assistant',
+  // Formula bar (Premium formulas)
+  formulaBarLabel: 'Formula bar',
+  formulaBarInputLabel: 'Formula',
+  formulaBarAddressLabel: 'Active cell',
   // Columns management text
   columnsManagementSearchTitle: 'Search',
   columnsManagementNoColumns: 'No columns',

package/hooks/core/useGridApiInitialization.js

@@ -12,6 +12,7 @@ var _EventManager = require("@mui/x-internals/EventManager");
 var _store = require("@mui/x-internals/store");
 var _useGridApiMethod = require("../utils/useGridApiMethod");
 var _signature = require("../../constants/signature");
+var _getPublicApiRef = require("../../utils/getPublicApiRef");
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
@@ -92,8 +93,11 @@ function useGridApiInitialization(inputApiRef, props) {
       return;
     }
     const details = props.signature === _signature.GridSignature.DataGridPro || props.signature === _signature.GridSignature.DataGridPremium ? {
+      apiRef: (0, _getPublicApiRef.getPublicApiRef)(privateApiRef),
       api: privateApiRef.current.getPublicApi()
-    } : {};
+    } : {
+      apiRef: (0, _getPublicApiRef.getPublicApiRef)(privateApiRef)
+    };
     privateApiRef.current.eventManager.emit(name, params, event, details);
   }, [privateApiRef, props.signature]);
   const subscribeEvent = React.useCallback((event, handler, options) => {