@mui/x-data-grid 6.3.0 → 6.4.0

package/node/joy/joySlots.js

@@ -15,11 +15,24 @@ var _FormLabel = _interopRequireDefault(require("@mui/joy/FormLabel"));
 var _Button = _interopRequireDefault(require("@mui/joy/Button"));
 var _IconButton = _interopRequireDefault(require("@mui/joy/IconButton"));
 var _Switch = _interopRequireDefault(require("@mui/joy/Switch"));
+var _Select = _interopRequireDefault(require("@mui/joy/Select"));
+var _Option = _interopRequireDefault(require("@mui/joy/Option"));
+var _Box = _interopRequireDefault(require("@mui/joy/Box"));
+var _Typography = _interopRequireDefault(require("@mui/joy/Typography"));
+var _utils = require("@mui/utils");
+var _icons = _interopRequireWildcard(require("./icons"));
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
-  _excluded2 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
-  _excluded3 = ["color", "size", "sx"],
-  _excluded4 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"];
+  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded5 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"],
+  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded7 = ["native"],
+  _excluded8 = ["shrink", "variant", "sx"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function convertColor(color) {
@@ -41,14 +54,17 @@ function convertSize(size) {
     large: 'lg'
   }[size] : size;
 }
-function convertVariant(variant) {
-  return variant ? {
+function convertVariant(variant, defaultVariant = 'plain') {
+  if (!variant) {
+    return defaultVariant;
+  }
+  return {
+    standard: 'outlined',
     outlined: 'outlined',
     contained: 'solid',
     text: 'plain',
-    standard: 'plain',
     filled: 'soft'
-  }[variant] : variant;
+  }[variant] || defaultVariant;
 }
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -69,36 +85,46 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef(({
-  onChange,
-  label,
-  placeholder,
-  value,
-  inputRef,
-  type
-}, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+      onChange,
+      label,
+      placeholder,
+      value,
+      inputRef,
+      type,
+      size,
+      variant
+    } = _ref2,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+  const rootRef = (0, _utils.unstable_useForkRef)(ref, props.InputProps?.ref);
+  const inputForkRef = (0, _utils.unstable_useForkRef)(inputRef, props?.inputProps?.ref);
+  const {
+    startAdornment,
+    endAdornment
+  } = props.InputProps || {};
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
-    ref: ref,
+    ref: rootRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
-      sx: {
-        fontSize: 12
-      },
       children: label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
       type: type,
       value: value,
       onChange: onChange,
       placeholder: placeholder,
-      size: "sm",
+      variant: convertVariant(variant, 'outlined'),
+      size: convertSize(size),
       slotProps: {
-        input: {
-          ref: inputRef
-        }
-      }
+        input: (0, _extends2.default)({}, props?.inputProps, {
+          ref: inputForkRef
+        })
+      },
+      startDecorator: startAdornment,
+      endDecorator: endAdornment
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
   let {
       startIcon,
       color,
@@ -106,25 +132,25 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref2, ref) {
       size,
       sx,
       variant
-    } = _ref2,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
+    } = _ref3,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, props, {
     size: convertSize(size),
     color: convertColor(color),
-    variant: convertVariant(variant) ?? 'plain',
+    variant: convertVariant(variant),
     ref: ref,
     startDecorator: startIcon,
     endDecorator: endIcon,
     sx: sx
   }));
 });
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
   let {
       color,
       size,
       sx
-    } = _ref3,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
+    } = _ref4,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, props, {
     size: convertSize(size),
     color: convertColor(color) ?? 'neutral',
@@ -133,7 +159,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref3, ref)
     sx: sx
   }));
 });
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
+const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
   let {
       name,
       color: colorProp,
@@ -145,8 +171,8 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
       sx,
       onChange,
       onClick
-    } = _ref4,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
+    } = _ref5,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref5, _excluded5);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, props, {
     onChange: onChange,
     size: convertSize(size),
@@ -169,17 +195,199 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref4, ref) {
     }), ...(Array.isArray(sx) ? sx : [sx])]
   }));
 });
-const joySlots = {
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let {
+      open,
+      onOpen,
+      value,
+      onChange,
+      size,
+      color,
+      variant,
+      MenuProps,
+      inputRef,
+      labelId
+    } = _ref6,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref6, _excluded6);
+  const handleChange = (event, newValue) => {
+    if (event && onChange) {
+      // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
+
+      // Redefine target to allow name and value to be read.
+      // This allows seamless integration with the most popular form libraries.
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
+      // Clone the event to not override `target` of the original event.
+      const nativeEvent = event.nativeEvent || event;
+      // @ts-ignore The nativeEvent is function, not object
+      const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
+      Object.defineProperty(clonedEvent, 'target', {
+        writable: true,
+        value: {
+          value: newValue,
+          name: props.name
+        }
+      });
+      onChange(clonedEvent, null);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({}, props, {
+    listboxOpen: open,
+    onListboxOpenChange: isOpen => {
+      if (isOpen) {
+        onOpen?.({});
+      } else {
+        MenuProps?.onClose?.({}, undefined);
+      }
+    },
+    size: convertSize(size),
+    color: convertColor(color),
+    variant: convertVariant(variant, 'outlined'),
+    ref: ref,
+    value: value,
+    onChange: handleChange,
+    slotProps: {
+      button: {
+        'aria-labelledby': labelId,
+        ref: inputRef
+      },
+      listbox: {
+        disablePortal: false,
+        sx: {
+          zIndex: 1350
+        }
+      }
+    }
+  }));
+});
+const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let props = (0, _objectWithoutPropertiesLoose2.default)(_ref7, _excluded7);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, (0, _extends2.default)({}, props, {
+    ref: ref
+  }));
+});
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+  let {
+      sx
+    } = _ref8,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref8, _excluded8);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, (0, _extends2.default)({}, props, {
+    ref: ref,
+    sx: sx
+  }));
+});
+function labelDisplayedRows({
+  from,
+  to,
+  count
+}) {
+  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+}
+const getLabelDisplayedRowsTo = ({
+  page,
+  pageSize,
+  rowCount
+}) => {
+  if (rowCount === -1) {
+    return (page + 1) * pageSize;
+  }
+  return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
+};
+const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const paginationModel = (0, _hooks.gridPaginationModelSelector)(apiRef);
+  const visibleTopLevelRowCount = (0, _hooks.gridFilteredTopLevelRowCountSelector)(apiRef);
+  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const handlePageChange = React.useCallback(page => {
+    apiRef.current.setPage(page);
+  }, [apiRef]);
+  const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
+  const pageSize = paginationModel.pageSize;
+  const pageSizeOptions = rootProps.pageSizeOptions?.includes(pageSize) ? rootProps.pageSizeOptions : [];
+  const handleChangeRowsPerPage = (event, newValue) => {
+    const newPageSize = Number(newValue);
+    apiRef.current.setPageSize(newPageSize);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 2,
+      justifyContent: 'flex-end',
+      px: 2
+    },
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+      orientation: "horizontal",
+      size: "sm",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
+        children: "Rows per page:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+        onChange: handleChangeRowsPerPage,
+        value: pageSize,
+        children: pageSizeOptions.map(option => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
+            value: option,
+            children: option
+          }, option);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      textAlign: "center",
+      fontSize: "xs",
+      fontWeight: "md",
+      children: labelDisplayedRows({
+        from: rowCount === 0 ? 0 : page * pageSize + 1,
+        to: getLabelDisplayedRowsTo({
+          page,
+          pageSize,
+          rowCount
+        }),
+        count: rowCount === -1 ? -1 : rowCount
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        display: 'flex',
+        gap: 0.5
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "sm",
+        color: "neutral",
+        variant: "outlined",
+        disabled: page === 0,
+        onClick: () => handlePageChange(page - 1),
+        sx: {
+          bgcolor: 'background.surface'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridKeyboardArrowLeft, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+        size: "sm",
+        color: "neutral",
+        variant: "outlined",
+        disabled: rowCount !== -1 ? page >= Math.ceil(rowCount / pageSize) - 1 : false,
+        onClick: () => handlePageChange(page + 1),
+        sx: {
+          bgcolor: 'background.surface'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridKeyboardArrowRight, {})
+      })]
+    })]
+  });
+});
+const joySlots = (0, _extends2.default)({}, _icons.default, {
   baseCheckbox: Checkbox,
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,
-  baseSwitch: Switch
-  // BaseFormControl: MUIFormControl,
-  // baseSelect: Select,
-  // baseSelectOption: Option,
+  baseSwitch: Switch,
+  baseSelect: Select,
+  baseSelectOption: Option,
+  baseInputLabel: InputLabel,
+  baseFormControl: _FormControl.default,
   // BaseTooltip: MUITooltip,
   // BasePopper: MUIPopper,
-};
+  pagination: Pagination
+});
 var _default = joySlots;
 exports.default = _default;

package/node/locales/deDE.js

@@ -43,7 +43,7 @@ const deDEGrid = {
   columnsPanelHideAllButton: 'Verberge alle',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Alle entfernen',
   filterPanelDeleteIconLabel: 'Löschen',
   filterPanelLogicOperator: 'Logische Operatoren',
   filterPanelOperator: 'Operatoren',
@@ -73,7 +73,7 @@ const deDEGrid = {
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Zeige alle Spalten',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Spalten verwalten',
   columnMenuFilter: 'Filter',
   columnMenuHideColumn: 'Verbergen',
   columnMenuUnsort: 'Sortierung deaktivieren',

package/node/locales/frFR.js

@@ -13,7 +13,7 @@ const frFRGrid = {
   // Density selector toolbar button text
   toolbarDensity: 'Densité',
   toolbarDensityLabel: 'Densité',
-  toolbarDensityCompact: 'Compact',
+  toolbarDensityCompact: 'Compacte',
   toolbarDensityStandard: 'Standard',
   toolbarDensityComfortable: 'Confortable',
   // Columns selector toolbar button text
@@ -26,7 +26,7 @@ const frFRGrid = {
   toolbarFiltersTooltipShow: 'Afficher les filtres',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtres actifs` : `${count} filtre actif`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Recherche…',
+  toolbarQuickFilterPlaceholder: 'Rechercher…',
   toolbarQuickFilterLabel: 'Recherche',
   toolbarQuickFilterDeleteIconLabel: 'Supprimer',
   // Export selector toolbar button text
@@ -36,7 +36,7 @@ const frFRGrid = {
   toolbarExportPrint: 'Imprimer',
   toolbarExportExcel: 'Télécharger pour Excel',
   // Columns panel text
-  columnsPanelTextFieldLabel: 'Chercher colonne',
+  columnsPanelTextFieldLabel: 'Chercher une colonne',
   columnsPanelTextFieldPlaceholder: 'Titre de la colonne',
   columnsPanelDragIconLabel: 'Réorganiser la colonne',
   columnsPanelShowAllButton: 'Tout afficher',
@@ -49,12 +49,12 @@ const frFRGrid = {
   filterPanelOperator: 'Opérateur',
   filterPanelOperatorAnd: 'Et',
   filterPanelOperatorOr: 'Ou',
-  filterPanelColumns: 'Colonnes',
+  filterPanelColumns: 'Colonne',
   filterPanelInputLabel: 'Valeur',
   filterPanelInputPlaceholder: 'Filtrer la valeur',
   // Filter operators text
   filterOperatorContains: 'contient',
-  filterOperatorEquals: 'égal à',
+  filterOperatorEquals: 'est égal à',
   filterOperatorStartsWith: 'commence par',
   filterOperatorEndsWith: 'se termine par',
   filterOperatorIs: 'est',
@@ -86,7 +86,7 @@ const frFRGrid = {
   // Rows selected footer text
   footerRowSelected: count => count > 1 ? `${count.toLocaleString()} lignes sélectionnées` : `${count.toLocaleString()} ligne sélectionnée`,
   // Total row amount footer text
-  footerTotalRows: 'Lignes totales :',
+  footerTotalRows: 'Total de lignes :',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} sur ${totalCount.toLocaleString()}`,
   // Checkbox selection text

package/node/locales/ptBR.js

@@ -43,7 +43,7 @@ const ptBRGrid = {
   columnsPanelHideAllButton: 'Ocultar todas',
   // Filter panel text
   filterPanelAddFilter: 'Adicionar filtro',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Remover todos',
   filterPanelDeleteIconLabel: 'Excluir',
   filterPanelLogicOperator: 'Operador lógico',
   filterPanelOperator: 'Operador',

package/node/locales/ukUA.js

@@ -57,7 +57,7 @@ const ukUAGrid = {
   columnsPanelHideAllButton: 'Приховати всі',
   // Filter panel text
   filterPanelAddFilter: 'Додати фільтр',
-  // filterPanelRemoveAll: 'Remove all',
+  filterPanelRemoveAll: 'Видалити всі',
   filterPanelDeleteIconLabel: 'Видалити',
   filterPanelLogicOperator: 'Логічна функція',
   filterPanelOperator: 'Оператори',
@@ -87,7 +87,7 @@ const ukUAGrid = {
   // Column menu text
   columnMenuLabel: 'Меню',
   columnMenuShowColumns: 'Показати стовпці',
-  // columnMenuManageColumns: 'Manage columns',
+  columnMenuManageColumns: 'Керування стовпцями',
   columnMenuFilter: 'Фільтр',
   columnMenuHideColumn: 'Приховати',
   columnMenuUnsort: 'Скасувати сортування',
@@ -141,13 +141,12 @@ const ukUAGrid = {
   // Row reordering text
   rowReorderingHeaderName: 'Порядок рядків',
   // Aggregation
-  aggregationMenuItemHeader: 'Агрегація'
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
+  aggregationMenuItemHeader: 'Агрегація',
+  aggregationFunctionLabelSum: 'сума',
+  aggregationFunctionLabelAvg: 'сер',
+  aggregationFunctionLabelMin: 'мін',
+  aggregationFunctionLabelMax: 'макс',
+  aggregationFunctionLabelSize: 'кількість'
 };
-
 const ukUA = (0, _getGridLocalization.getGridLocalization)(ukUAGrid, _locale.ukUA);
 exports.ukUA = ukUA;

package/node/material/index.js

@@ -16,6 +16,7 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _GridColumnUnsortedIcon = require("./icons/GridColumnUnsortedIcon");
 var _icons = require("./icons");
 var _MUISelectOption = _interopRequireDefault(require("./components/MUISelectOption"));
@@ -67,7 +68,8 @@ const materialSlots = (0, _extends2.default)({}, iconSlots, {
   BaseTooltip: _Tooltip.default,
   BasePopper: _Popper.default,
   BaseInputLabel: _InputLabel.default,
-  BaseSelectOption: _MUISelectOption.default
+  BaseSelectOption: _MUISelectOption.default,
+  BaseChip: _Chip.default
 });
 var _default = materialSlots;
 exports.default = _default;

package/node/models/api/index.js

@@ -146,17 +146,6 @@ Object.keys(_gridDisableVirtualizationApi).forEach(function (key) {
     }
   });
 });
-var _gridClipboardApi = require("./gridClipboardApi");
-Object.keys(_gridClipboardApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridClipboardApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridClipboardApi[key];
-    }
-  });
-});
 var _gridCallbackDetails = require("./gridCallbackDetails");
 Object.keys(_gridCallbackDetails).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/utils/domUtils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findParentElementFromClassName = findParentElementFromClassName;
+exports.getActiveElement = void 0;
 exports.getGridCellElement = getGridCellElement;
 exports.getGridColumnHeaderElement = getGridColumnHeaderElement;
 exports.getGridRowElement = getGridRowElement;
@@ -52,4 +53,17 @@ function getGridCellElement(root, {
   const cellSelector = `.${_gridClasses.gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
   const selector = `${rowSelector} ${cellSelector}`;
   return root.querySelector(selector);
-}
+}
+
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  return activeEl;
+};
+exports.getActiveElement = getActiveElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.12.0",
+    "@mui/utils": "^5.12.3",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"

package/utils/domUtils.d.ts

@@ -10,3 +10,4 @@ export declare function getGridCellElement(root: Element, { id, field }: {
     id: GridRowId;
     field: string;
 }): HTMLDivElement | null;
+export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;

package/utils/domUtils.js

@@ -39,4 +39,16 @@ export function getGridCellElement(root, {
   const cellSelector = `.${gridClasses.cell}[data-field="${escapeOperandAttributeSelector(field)}"]`;
   const selector = `${rowSelector} ${cellSelector}`;
   return root.querySelector(selector);
-}
+}
+
+// https://www.abeautifulsite.net/posts/finding-the-active-element-in-a-shadow-root/
+export const getActiveElement = (root = document) => {
+  const activeEl = root.activeElement;
+  if (!activeEl) {
+    return null;
+  }
+  if (activeEl.shadowRoot) {
+    return getActiveElement(activeEl.shadowRoot);
+  }
+  return activeEl;
+};

package/legacy/models/api/gridClipboardApi.js

@@ -1 +0,0 @@
-export {};

package/models/api/gridClipboardApi.d.ts

@@ -1,11 +0,0 @@
-/**
- * The Clipboard API interface that is available in the grid [[apiRef]].
- */
-export interface GridClipboardApi {
-    /**
-     * Copies the selected rows to the clipboard.
-     * The fields will be separated by the TAB character.
-     * @ignore - do not document.
-     */
-    unstable_copySelectedRowsToClipboard: () => void;
-}

package/models/api/gridClipboardApi.js

@@ -1 +0,0 @@
-export {};

package/modern/models/api/gridClipboardApi.js

@@ -1 +0,0 @@
-export {};

package/node/models/api/gridClipboardApi.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});