@mui/x-data-grid 9.0.0-beta.0 → 9.0.0

package/locales/zhTW.mjs

@@ -59,7 +59,7 @@ const zhTWGrid = {
   filterPanelOperator: '運算子',
   filterPanelOperatorAnd: '且',
   filterPanelOperatorOr: '或',
-  filterPanelColumns: '欄位',
+  filterPanelColumn: '欄位',
   filterPanelInputLabel: '值',
   filterPanelInputPlaceholder: '篩選值',
   // Filter operators text

package/material/index.js

@@ -64,7 +64,7 @@ var _variables = require("./variables");
 const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
   _excluded2 = ["onRowsPerPageChange", "material", "disabled"],
   _excluded3 = ["material"],
-  _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material"],
+  _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material", "inputRef"],
   _excluded5 = ["material"],
   _excluded6 = ["material"],
   _excluded7 = ["material"],
@@ -80,7 +80,7 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded15 = ["slotProps", "material"],
   _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
   _excluded17 = ["key"],
-  _excluded18 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded18 = ["slotProps"],
   _excluded19 = ["slotProps"],
   _excluded20 = ["slotProps"],
   _excluded21 = ["slotProps", "material"],
@@ -237,11 +237,15 @@ const BasePagination = (0, _forwardRef.forwardRef)(function BasePagination(props
       return undefined;
     }
     return {
-      backIconButtonProps: {
-        disabled: true
-      },
-      nextIconButtonProps: {
-        disabled: true
+      slotProps: {
+        actions: {
+          previousButton: {
+            disabled: true
+          },
+          nextButton: {
+            disabled: true
+          }
+        }
       }
     };
   }, [disabled]);
@@ -282,12 +286,14 @@ const BaseCheckbox = (0, _forwardRef.forwardRef)(function BaseCheckbox(props, re
       fullWidth,
       slotProps,
       className,
-      material
+      material,
+      inputRef
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded4);
   const elementRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(elementRef, ref);
   const rippleRef = React.useRef(null);
+  const combinedInputRef = (0, _useForkRef.default)(inputRef, slotProps?.htmlInput?.ref, material?.slotProps?.input?.ref);
   React.useEffect(() => {
     if (autoFocus) {
       const input = elementRef.current?.querySelector('input');
@@ -300,12 +306,15 @@ const BaseCheckbox = (0, _forwardRef.forwardRef)(function BaseCheckbox(props, re
       rippleRef.current.stop({});
     }
   }, [autoFocus]);
+  const checkboxSlotProps = React.useMemo(() => (0, _extends2.default)({}, material?.slotProps, {
+    input: (0, _extends2.default)({}, material?.slotProps?.input, slotProps?.htmlInput, {
+      ref: combinedInputRef
+    })
+  }), [material?.slotProps, slotProps?.htmlInput, combinedInputRef]);
   if (!label) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, material, {
       className: (0, _clsx.default)(className, material?.className),
-      slotProps: {
-        input: slotProps?.htmlInput
-      },
+      slotProps: checkboxSlotProps,
       ref: handleRef,
       touchRippleRef: rippleRef
     }));
@@ -313,9 +322,7 @@ const BaseCheckbox = (0, _forwardRef.forwardRef)(function BaseCheckbox(props, re
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlLabel, {
     className: className,
     control: /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, material, {
-      slotProps: {
-        input: slotProps?.htmlInput
-      },
+      slotProps: checkboxSlotProps,
       ref: handleRef,
       touchRippleRef: rippleRef
     })),
@@ -542,9 +549,7 @@ function BaseAutocomplete(props) {
     }),
     renderInput: params => {
       const {
-          inputProps: htmlInputProps,
-          InputProps,
-          InputLabelProps
+          slotProps: autocompleteSlotProps
         } = params,
         inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded18);
       const _ref = slotProps?.textField ?? {},
@@ -562,11 +567,11 @@ function BaseAutocomplete(props) {
         placeholder: placeholder
       }, textFieldRest, baseTextFieldRest, {
         slotProps: {
-          htmlInput: (0, _extends2.default)({}, htmlInputProps, textFieldSlotProps?.htmlInput, baseTextFieldSlotProps?.htmlInput),
-          input: (0, _extends2.default)({}, transformInputProps(InputProps, false), textFieldSlotProps?.input, baseTextFieldSlotProps?.input),
+          htmlInput: (0, _extends2.default)({}, autocompleteSlotProps.htmlInput, textFieldSlotProps?.htmlInput, baseTextFieldSlotProps?.htmlInput),
+          input: (0, _extends2.default)({}, transformInputProps(autocompleteSlotProps.input, false), textFieldSlotProps?.input, baseTextFieldSlotProps?.input),
           inputLabel: (0, _extends2.default)({
             shrink: true
-          }, InputLabelProps, textFieldSlotProps?.inputLabel, baseTextFieldSlotProps?.inputLabel)
+          }, autocompleteSlotProps.inputLabel, textFieldSlotProps?.inputLabel, baseTextFieldSlotProps?.inputLabel)
         }
       }));
     }
@@ -749,7 +754,7 @@ const StyledTabs = (0, _styles.styled)(_Tabs.default, {
 })(({
   theme
 }) => ({
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const StyledTab = (0, _styles.styled)(_Tab.default, {
   name: 'MuiDataGrid',

package/material/index.mjs

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
   _excluded2 = ["onRowsPerPageChange", "material", "disabled"],
   _excluded3 = ["material"],
-  _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material"],
+  _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material", "inputRef"],
   _excluded5 = ["material"],
   _excluded6 = ["material"],
   _excluded7 = ["material"],
@@ -19,7 +19,7 @@ const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps"
   _excluded15 = ["slotProps", "material"],
   _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
   _excluded17 = ["key"],
-  _excluded18 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded18 = ["slotProps"],
   _excluded19 = ["slotProps"],
   _excluded20 = ["slotProps"],
   _excluded21 = ["slotProps", "material"],
@@ -224,11 +224,15 @@ const BasePagination = forwardRef(function BasePagination(props, ref) {
       return undefined;
     }
     return {
-      backIconButtonProps: {
-        disabled: true
-      },
-      nextIconButtonProps: {
-        disabled: true
+      slotProps: {
+        actions: {
+          previousButton: {
+            disabled: true
+          },
+          nextButton: {
+            disabled: true
+          }
+        }
       }
     };
   }, [disabled]);
@@ -269,12 +273,14 @@ const BaseCheckbox = forwardRef(function BaseCheckbox(props, ref) {
       fullWidth,
       slotProps,
       className,
-      material
+      material,
+      inputRef
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded4);
   const elementRef = React.useRef(null);
   const handleRef = useForkRef(elementRef, ref);
   const rippleRef = React.useRef(null);
+  const combinedInputRef = useForkRef(inputRef, slotProps?.htmlInput?.ref, material?.slotProps?.input?.ref);
   React.useEffect(() => {
     if (autoFocus) {
       const input = elementRef.current?.querySelector('input');
@@ -287,12 +293,15 @@ const BaseCheckbox = forwardRef(function BaseCheckbox(props, ref) {
       rippleRef.current.stop({});
     }
   }, [autoFocus]);
+  const checkboxSlotProps = React.useMemo(() => _extends({}, material?.slotProps, {
+    input: _extends({}, material?.slotProps?.input, slotProps?.htmlInput, {
+      ref: combinedInputRef
+    })
+  }), [material?.slotProps, slotProps?.htmlInput, combinedInputRef]);
   if (!label) {
     return /*#__PURE__*/_jsx(Checkbox, _extends({}, other, material, {
       className: clsx(className, material?.className),
-      slotProps: {
-        input: slotProps?.htmlInput
-      },
+      slotProps: checkboxSlotProps,
       ref: handleRef,
       touchRippleRef: rippleRef
     }));
@@ -300,9 +309,7 @@ const BaseCheckbox = forwardRef(function BaseCheckbox(props, ref) {
   return /*#__PURE__*/_jsx(FormControlLabel, {
     className: className,
     control: /*#__PURE__*/_jsx(Checkbox, _extends({}, other, material, {
-      slotProps: {
-        input: slotProps?.htmlInput
-      },
+      slotProps: checkboxSlotProps,
       ref: handleRef,
       touchRippleRef: rippleRef
     })),
@@ -529,9 +536,7 @@ function BaseAutocomplete(props) {
     }),
     renderInput: params => {
       const {
-          inputProps: htmlInputProps,
-          InputProps,
-          InputLabelProps
+          slotProps: autocompleteSlotProps
         } = params,
         inputRest = _objectWithoutPropertiesLoose(params, _excluded18);
       const _ref = slotProps?.textField ?? {},
@@ -549,11 +554,11 @@ function BaseAutocomplete(props) {
         placeholder: placeholder
       }, textFieldRest, baseTextFieldRest, {
         slotProps: {
-          htmlInput: _extends({}, htmlInputProps, textFieldSlotProps?.htmlInput, baseTextFieldSlotProps?.htmlInput),
-          input: _extends({}, transformInputProps(InputProps, false), textFieldSlotProps?.input, baseTextFieldSlotProps?.input),
+          htmlInput: _extends({}, autocompleteSlotProps.htmlInput, textFieldSlotProps?.htmlInput, baseTextFieldSlotProps?.htmlInput),
+          input: _extends({}, transformInputProps(autocompleteSlotProps.input, false), textFieldSlotProps?.input, baseTextFieldSlotProps?.input),
           inputLabel: _extends({
             shrink: true
-          }, InputLabelProps, textFieldSlotProps?.inputLabel, baseTextFieldSlotProps?.inputLabel)
+          }, autocompleteSlotProps.inputLabel, textFieldSlotProps?.inputLabel, baseTextFieldSlotProps?.inputLabel)
         }
       }));
     }
@@ -736,7 +741,7 @@ const StyledTabs = styled(MUITabs, {
 })(({
   theme
 }) => ({
-  borderBottom: `1px solid ${theme.palette.divider}`
+  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
 }));
 const StyledTab = styled(MUITab, {
   name: 'MuiDataGrid',

package/material/variables.js

@@ -28,9 +28,9 @@ function transformTheme(t) {
   const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
-  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
+  const backgroundBackdrop = t.alpha((t.vars || t).palette.background.default, (t.vars || t).palette.action.disabledOpacity);
   const backgroundOverlay = t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
-  const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
+  const selectedColor = (t.vars || t).palette.primary.main;
   const radius = getRadius(t);
   const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
   const fontSmall = t.vars?.font?.caption ?? formatFont(t.typography.caption);
@@ -89,9 +89,9 @@ function getBorderColor(theme) {
     return theme.vars.palette.TableCell.border;
   }
   if (theme.palette.mode === 'light') {
-    return (0, _styles.lighten)((0, _styles.alpha)(theme.palette.divider, 1), 0.88);
+    return theme.lighten(theme.alpha(theme.palette.divider, 1), 0.88);
   }
-  return (0, _styles.darken)((0, _styles.alpha)(theme.palette.divider, 1), 0.68);
+  return theme.darken(theme.alpha(theme.palette.divider, 1), 0.68);
 }
 function setOpacity(color, opacity) {
   return `rgba(from ${color} r g b / ${opacity})`;

package/material/variables.mjs

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { alpha, darken, lighten } from '@mui/material/styles';
 import { useTheme } from '@mui/material/styles';
 import { hash } from '@mui/x-internals/hash';
 import { vars } from "../constants/cssVariables.mjs";
@@ -22,9 +21,9 @@ function transformTheme(t) {
   const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
   const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
   const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
-  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
+  const backgroundBackdrop = t.alpha((t.vars || t).palette.background.default, (t.vars || t).palette.action.disabledOpacity);
   const backgroundOverlay = t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
-  const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
+  const selectedColor = (t.vars || t).palette.primary.main;
   const radius = getRadius(t);
   const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
   const fontSmall = t.vars?.font?.caption ?? formatFont(t.typography.caption);
@@ -83,9 +82,9 @@ function getBorderColor(theme) {
     return theme.vars.palette.TableCell.border;
   }
   if (theme.palette.mode === 'light') {
-    return lighten(alpha(theme.palette.divider, 1), 0.88);
+    return theme.lighten(theme.alpha(theme.palette.divider, 1), 0.88);
   }
-  return darken(alpha(theme.palette.divider, 1), 0.68);
+  return theme.darken(theme.alpha(theme.palette.divider, 1), 0.68);
 }
 function setOpacity(color, opacity) {
   return `rgba(from ${color} r g b / ${opacity})`;

package/models/api/gridLocaleTextApi.d.mts

@@ -46,7 +46,7 @@ export interface GridLocaleText {
   filterPanelOperator: React.ReactNode;
   filterPanelOperatorAnd: React.ReactNode;
   filterPanelOperatorOr: React.ReactNode;
-  filterPanelColumns: React.ReactNode;
+  filterPanelColumn: React.ReactNode;
   filterPanelInputLabel: string;
   filterPanelInputPlaceholder: string;
   filterOperatorContains: string;

package/models/api/gridLocaleTextApi.d.ts

@@ -46,7 +46,7 @@ export interface GridLocaleText {
   filterPanelOperator: React.ReactNode;
   filterPanelOperatorAnd: React.ReactNode;
   filterPanelOperatorOr: React.ReactNode;
-  filterPanelColumns: React.ReactNode;
+  filterPanelColumn: React.ReactNode;
   filterPanelInputLabel: string;
   filterPanelInputPlaceholder: string;
   filterOperatorContains: string;

package/models/gridBaseSlots.d.mts

@@ -96,7 +96,9 @@ export type CheckboxProps = CommonProps & {
   size?: 'small' | 'medium';
   density?: 'standard' | 'compact';
   slotProps?: {
-    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & {
+      ref?: React.Ref<HTMLInputElement>;
+    };
   };
   style?: React.CSSProperties;
   tabIndex?: number;
@@ -116,7 +118,7 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
-export type ToggleButtonProps = CommonProps & {
+export type ToggleButtonProps = Omit<CommonProps, 'onChange'> & {
   selected?: boolean;
   value: string;
 };

package/models/gridBaseSlots.d.ts

@@ -96,7 +96,9 @@ export type CheckboxProps = CommonProps & {
   size?: 'small' | 'medium';
   density?: 'standard' | 'compact';
   slotProps?: {
-    htmlInput?: React.InputHTMLAttributes<HTMLInputElement>;
+    htmlInput?: React.InputHTMLAttributes<HTMLInputElement> & {
+      ref?: React.Ref<HTMLInputElement>;
+    };
   };
   style?: React.CSSProperties;
   tabIndex?: number;
@@ -116,7 +118,7 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
-export type ToggleButtonProps = CommonProps & {
+export type ToggleButtonProps = Omit<CommonProps, 'onChange'> & {
   selected?: boolean;
   value: string;
 };

package/models/props/DataGridProps.d.mts

@@ -37,6 +37,15 @@ export interface GridExperimentalFeatures {
    * Only works if NODE_ENV=test.
    */
   warnIfFocusStateIsNotSynced: boolean;
+  /**
+   * Sets the layout mode of the virtualizer.
+   * - `'uncontrolled'` (default): the browser controls scrolling and the virtualizer
+   *   positions rows using a filler element.
+   * - `'controlled'`: the virtualizer controls scrolling by translating the viewport,
+   *   enabling features such as sticky pinned rows and columns without extra DOM cost.
+   * @default 'uncontrolled'
+   */
+  virtualizerLayoutMode: 'controlled' | 'uncontrolled';
 }
 /**
  * The props users can give to the Data Grid component.

package/models/props/DataGridProps.d.ts

@@ -37,6 +37,15 @@ export interface GridExperimentalFeatures {
    * Only works if NODE_ENV=test.
    */
   warnIfFocusStateIsNotSynced: boolean;
+  /**
+   * Sets the layout mode of the virtualizer.
+   * - `'uncontrolled'` (default): the browser controls scrolling and the virtualizer
+   *   positions rows using a filler element.
+   * - `'controlled'`: the virtualizer controls scrolling by translating the viewport,
+   *   enabling features such as sticky pinned rows and columns without extra DOM cost.
+   * @default 'uncontrolled'
+   */
+  virtualizerLayoutMode: 'controlled' | 'uncontrolled';
 }
 /**
  * The props users can give to the Data Grid component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -38,18 +38,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@mui/utils": "^7.3.7",
+    "@mui/utils": "9.0.0",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-virtualizer": "1.0.0-beta.1",
-    "@mui/x-internals": "9.0.0-alpha.4"
+    "@mui/x-virtualizer": "9.0.0-alpha.0",
+    "@mui/x-internals": "^9.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
-    "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
+    "@mui/material": "^7.3.0 || ^9.0.0",
+    "@mui/system": "^7.3.0 || ^9.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },

package/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.mjs

@@ -1,9 +1,9 @@
 export class FinalizationRegistryBasedCleanupTracking {
-  registry = (() => new FinalizationRegistry(unsubscribe => {
+  registry = new FinalizationRegistry(unsubscribe => {
     if (typeof unsubscribe === 'function') {
       unsubscribe();
     }
-  }))();
+  });
   register(object, unsubscribe, unregisterToken) {
     this.registry.register(object, unsubscribe, unregisterToken);
   }

package/utils/cleanupTracking/TimerBasedCleanupTracking.mjs

@@ -1,8 +1,8 @@
 // If no effect ran after this amount of time, we assume that the render was not committed by React
 const CLEANUP_TIMER_LOOP_MILLIS = 1000;
 export class TimerBasedCleanupTracking {
-  timeouts = (() => new Map())();
-  cleanupTimeout = (() => CLEANUP_TIMER_LOOP_MILLIS)();
+  timeouts = new Map();
+  cleanupTimeout = CLEANUP_TIMER_LOOP_MILLIS;
   constructor(timeout = CLEANUP_TIMER_LOOP_MILLIS) {
     this.cleanupTimeout = timeout;
   }

package/utils/domUtils.js

@@ -221,12 +221,13 @@ function findGridHeaderFilter(api, field) {
 }
 function findGridCells(api, field) {
   const container = api.virtualScrollerRef.current;
-  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(
   // Use > to ignore rows from nested Data Grids (for example in detail panel)
-  `:scope > div > div > .${_gridClasses.gridClasses.row}`);
+  `:scope > div > div > div > .${_gridClasses.gridClasses.row},
+     :scope > div > div > div > div > .${_gridClasses.gridClasses.row}`);
 }
 function parseCellColIndex(col) {
   const ariaColIndex = col.getAttribute('aria-colindex');

package/utils/domUtils.mjs

@@ -193,12 +193,13 @@ export function findGridHeaderFilter(api, field) {
 }
 export function findGridCells(api, field) {
   const container = api.virtualScrollerRef.current;
-  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > div > [data-field="${escapeOperandAttributeSelector(field)}"][role="gridcell"]`));
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(
   // Use > to ignore rows from nested Data Grids (for example in detail panel)
-  `:scope > div > div > .${gridClasses.row}`);
+  `:scope > div > div > div > .${gridClasses.row},
+     :scope > div > div > div > div > .${gridClasses.row}`);
 }
 function parseCellColIndex(col) {
   const ariaColIndex = col.getAttribute('aria-colindex');

package/utils/keyboardUtils.d.mts

@@ -6,4 +6,6 @@ export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;
 export declare function isUndoShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillDownShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillRightShortcut(event: React.KeyboardEvent): boolean;
 export declare function isRedoShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.d.ts

@@ -6,4 +6,6 @@ export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;
 export declare function isUndoShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillDownShortcut(event: React.KeyboardEvent): boolean;
+export declare function isFillRightShortcut(event: React.KeyboardEvent): boolean;
 export declare function isRedoShortcut(event: React.KeyboardEvent): boolean;

package/utils/keyboardUtils.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isCopyShortcut = isCopyShortcut;
+exports.isFillDownShortcut = isFillDownShortcut;
+exports.isFillRightShortcut = isFillRightShortcut;
 exports.isNavigationKey = exports.isKeyboardEvent = exports.isHideMenuKey = void 0;
 exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
@@ -45,6 +47,12 @@ function isCopyShortcut(event) {
 function isUndoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'Z' && !event.shiftKey && !event.altKey;
 }
+function isFillDownShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'D' && !event.shiftKey && !event.altKey;
+}
+function isFillRightShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'R' && !event.shiftKey && !event.altKey;
+}
 function isRedoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && (String.fromCharCode(event.keyCode) === 'Z' && event.shiftKey || String.fromCharCode(event.keyCode) === 'Y' && !event.shiftKey) && !event.altKey;
 }

package/utils/keyboardUtils.mjs

@@ -31,6 +31,12 @@ export function isCopyShortcut(event) {
 export function isUndoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'Z' && !event.shiftKey && !event.altKey;
 }
+export function isFillDownShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'D' && !event.shiftKey && !event.altKey;
+}
+export function isFillRightShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'R' && !event.shiftKey && !event.altKey;
+}
 export function isRedoShortcut(event) {
   return (event.ctrlKey || event.metaKey) && (String.fromCharCode(event.keyCode) === 'Z' && event.shiftKey || String.fromCharCode(event.keyCode) === 'Y' && !event.shiftKey) && !event.altKey;
 }