@mui/x-data-grid 6.0.2 → 6.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/CHANGELOG.md +119 -5
  2. package/components/GridPagination.d.ts +2 -2
  3. package/components/GridRow.js +1 -1
  4. package/components/columnHeaders/GridColumnHeaderSeparator.js +3 -3
  5. package/components/columnHeaders/GridColumnHeaderTitle.js +5 -5
  6. package/components/menu/columnMenu/GridColumnHeaderMenu.js +4 -2
  7. package/components/menu/columnMenu/GridColumnMenu.d.ts +5 -5
  8. package/components/menu/columnMenu/GridColumnMenu.js +30 -30
  9. package/components/menu/columnMenu/GridColumnMenuProps.d.ts +1 -1
  10. package/components/panel/GridPanel.d.ts +1 -1
  11. package/components/panel/filterPanel/GridFilterPanel.js +1 -1
  12. package/components/reexportable.d.ts +1 -1
  13. package/components/reexportable.js +1 -1
  14. package/hooks/features/columnHeaders/useGridColumnHeaders.js +7 -1
  15. package/hooks/features/columnMenu/columnMenuInterfaces.d.ts +11 -11
  16. package/hooks/features/columnMenu/{useGridColumnMenuComponents.d.ts → useGridColumnMenuSlots.d.ts} +4 -4
  17. package/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js} +21 -26
  18. package/hooks/features/columns/useGridColumns.js +1 -1
  19. package/hooks/features/filter/useGridFilter.js +1 -1
  20. package/hooks/features/preferencesPanel/gridPreferencePanelsValue.js +3 -3
  21. package/hooks/features/sorting/useGridSorting.js +1 -1
  22. package/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  23. package/hooks/utils/useGridApiEventHandler.js +3 -3
  24. package/index.d.ts +1 -1
  25. package/index.js +2 -2
  26. package/legacy/components/GridRow.js +1 -1
  27. package/legacy/components/columnHeaders/GridColumnHeaderSeparator.js +3 -3
  28. package/legacy/components/columnHeaders/GridColumnHeaderTitle.js +5 -5
  29. package/legacy/components/menu/columnMenu/GridColumnHeaderMenu.js +4 -2
  30. package/legacy/components/menu/columnMenu/GridColumnMenu.js +32 -32
  31. package/legacy/components/panel/filterPanel/GridFilterPanel.js +1 -1
  32. package/legacy/components/reexportable.js +1 -1
  33. package/legacy/hooks/features/columnHeaders/useGridColumnHeaders.js +7 -1
  34. package/legacy/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js} +25 -30
  35. package/legacy/hooks/features/columns/useGridColumns.js +1 -1
  36. package/legacy/hooks/features/filter/useGridFilter.js +1 -1
  37. package/legacy/hooks/features/preferencesPanel/gridPreferencePanelsValue.js +3 -3
  38. package/legacy/hooks/features/sorting/useGridSorting.js +1 -1
  39. package/legacy/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  40. package/legacy/hooks/utils/useGridApiEventHandler.js +3 -3
  41. package/legacy/index.js +2 -2
  42. package/legacy/locales/bgBG.js +9 -12
  43. package/legacy/locales/daDK.js +16 -21
  44. package/legacy/locales/esES.js +1 -1
  45. package/legacy/locales/faIR.js +2 -2
  46. package/legacy/locales/nbNO.js +10 -12
  47. package/legacy/locales/nlNL.js +7 -9
  48. package/legacy/locales/svSE.js +2 -2
  49. package/legacy/models/gridEditRowModel.js +9 -9
  50. package/legacy/models/gridFilterItem.js +3 -3
  51. package/legacy/models/params/gridEditCellParams.js +10 -10
  52. package/legacy/models/params/gridRowParams.js +9 -9
  53. package/locales/bgBG.js +9 -12
  54. package/locales/daDK.js +16 -21
  55. package/locales/esES.js +1 -1
  56. package/locales/faIR.js +2 -2
  57. package/locales/nbNO.js +10 -12
  58. package/locales/nlNL.js +7 -9
  59. package/locales/svSE.js +2 -2
  60. package/models/gridEditRowModel.js +9 -9
  61. package/models/gridFilterItem.js +3 -3
  62. package/models/params/gridEditCellParams.js +10 -10
  63. package/models/params/gridRowParams.js +9 -9
  64. package/modern/components/GridRow.js +1 -1
  65. package/modern/components/columnHeaders/GridColumnHeaderSeparator.js +3 -3
  66. package/modern/components/columnHeaders/GridColumnHeaderTitle.js +5 -5
  67. package/modern/components/menu/columnMenu/GridColumnHeaderMenu.js +4 -2
  68. package/modern/components/menu/columnMenu/GridColumnMenu.js +30 -30
  69. package/modern/components/panel/filterPanel/GridFilterPanel.js +1 -1
  70. package/modern/components/reexportable.js +1 -1
  71. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +6 -1
  72. package/modern/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js} +21 -26
  73. package/modern/hooks/features/columns/useGridColumns.js +1 -1
  74. package/modern/hooks/features/filter/useGridFilter.js +1 -1
  75. package/modern/hooks/features/preferencesPanel/gridPreferencePanelsValue.js +3 -3
  76. package/modern/hooks/features/sorting/useGridSorting.js +1 -1
  77. package/modern/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  78. package/modern/hooks/utils/useGridApiEventHandler.js +3 -3
  79. package/modern/index.js +2 -2
  80. package/modern/locales/bgBG.js +9 -12
  81. package/modern/locales/daDK.js +16 -21
  82. package/modern/locales/esES.js +1 -1
  83. package/modern/locales/faIR.js +2 -2
  84. package/modern/locales/nbNO.js +10 -12
  85. package/modern/locales/nlNL.js +7 -9
  86. package/modern/locales/svSE.js +2 -2
  87. package/modern/models/gridEditRowModel.js +9 -9
  88. package/modern/models/gridFilterItem.js +3 -3
  89. package/modern/models/params/gridEditCellParams.js +10 -10
  90. package/modern/models/params/gridRowParams.js +9 -9
  91. package/node/components/GridRow.js +1 -1
  92. package/node/components/columnHeaders/GridColumnHeaderSeparator.js +4 -4
  93. package/node/components/columnHeaders/GridColumnHeaderTitle.js +5 -5
  94. package/node/components/menu/columnMenu/GridColumnHeaderMenu.js +4 -2
  95. package/node/components/menu/columnMenu/GridColumnMenu.js +33 -33
  96. package/node/components/panel/filterPanel/GridFilterPanel.js +1 -1
  97. package/node/components/reexportable.js +4 -4
  98. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +6 -1
  99. package/node/hooks/features/columnMenu/{useGridColumnMenuComponents.js → useGridColumnMenuSlots.js} +22 -27
  100. package/node/hooks/features/columns/useGridColumns.js +1 -1
  101. package/node/hooks/features/filter/useGridFilter.js +1 -1
  102. package/node/hooks/features/preferencesPanel/gridPreferencePanelsValue.js +4 -4
  103. package/node/hooks/features/sorting/useGridSorting.js +1 -1
  104. package/node/hooks/features/virtualization/useGridVirtualScroller.js +1 -1
  105. package/node/hooks/utils/useGridApiEventHandler.js +4 -4
  106. package/node/index.js +7 -7
  107. package/node/locales/bgBG.js +9 -12
  108. package/node/locales/daDK.js +16 -21
  109. package/node/locales/esES.js +1 -1
  110. package/node/locales/faIR.js +2 -2
  111. package/node/locales/nbNO.js +10 -12
  112. package/node/locales/nlNL.js +7 -9
  113. package/node/locales/svSE.js +2 -2
  114. package/node/models/gridEditRowModel.js +12 -12
  115. package/node/models/gridFilterItem.js +4 -4
  116. package/node/models/params/gridEditCellParams.js +12 -12
  117. package/node/models/params/gridRowParams.js +11 -11
  118. package/package.json +2 -2
@@ -14,23 +14,23 @@
14
14
  /**
15
15
  * The getRowHeight return value.
16
16
  */
17
- var GridRowEditStartReasons;
18
- /**
19
- * Params passed to the `rowEditStart` event.
20
- */
21
- (function (GridRowEditStartReasons) {
17
+ var GridRowEditStartReasons = /*#__PURE__*/function (GridRowEditStartReasons) {
22
18
  GridRowEditStartReasons["enterKeyDown"] = "enterKeyDown";
23
19
  GridRowEditStartReasons["cellDoubleClick"] = "cellDoubleClick";
24
20
  GridRowEditStartReasons["printableKeyDown"] = "printableKeyDown";
25
21
  GridRowEditStartReasons["deleteKeyDown"] = "deleteKeyDown";
26
- })(GridRowEditStartReasons || (GridRowEditStartReasons = {}));
27
- var GridRowEditStopReasons;
28
- (function (GridRowEditStopReasons) {
22
+ return GridRowEditStartReasons;
23
+ }(GridRowEditStartReasons || {});
24
+ /**
25
+ * Params passed to the `rowEditStart` event.
26
+ */
27
+ var GridRowEditStopReasons = /*#__PURE__*/function (GridRowEditStopReasons) {
29
28
  GridRowEditStopReasons["rowFocusOut"] = "rowFocusOut";
30
29
  GridRowEditStopReasons["escapeKeyDown"] = "escapeKeyDown";
31
30
  GridRowEditStopReasons["enterKeyDown"] = "enterKeyDown";
32
31
  GridRowEditStopReasons["tabKeyDown"] = "tabKeyDown";
33
32
  GridRowEditStopReasons["shiftTabKeyDown"] = "shiftTabKeyDown";
34
- })(GridRowEditStopReasons || (GridRowEditStopReasons = {}));
33
+ return GridRowEditStopReasons;
34
+ }(GridRowEditStopReasons || {});
35
35
  // https://github.com/mui/mui-x/pull/3738#discussion_r798504277
36
36
  export { GridRowEditStartReasons, GridRowEditStopReasons };
@@ -48,7 +48,7 @@ function EmptyCell({
48
48
  width
49
49
  };
50
50
  return /*#__PURE__*/_jsx("div", {
51
- className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
51
+ className: `${gridClasses.cell} ${gridClasses.withBorderColor}`,
52
52
  style: style
53
53
  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
54
54
  }
@@ -7,11 +7,11 @@ import { unstable_composeClasses as composeClasses, unstable_capitalize as capit
7
7
  import { getDataGridUtilityClass } from '../../constants/gridClasses';
8
8
  import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
10
- var GridColumnHeaderSeparatorSides;
11
- (function (GridColumnHeaderSeparatorSides) {
10
+ var GridColumnHeaderSeparatorSides = /*#__PURE__*/function (GridColumnHeaderSeparatorSides) {
12
11
  GridColumnHeaderSeparatorSides["Left"] = "left";
13
12
  GridColumnHeaderSeparatorSides["Right"] = "right";
14
- })(GridColumnHeaderSeparatorSides || (GridColumnHeaderSeparatorSides = {}));
13
+ return GridColumnHeaderSeparatorSides;
14
+ }(GridColumnHeaderSeparatorSides || {});
15
15
  const useUtilityClasses = ownerState => {
16
16
  const {
17
17
  resizable,
@@ -46,14 +46,13 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
46
46
  function GridColumnHeaderTitle(props) {
47
47
  const {
48
48
  label,
49
- description,
50
- columnWidth
49
+ description
51
50
  } = props;
52
51
  const rootProps = useGridRootProps();
53
52
  const titleRef = React.useRef(null);
54
53
  const [tooltip, setTooltip] = React.useState('');
55
- React.useEffect(() => {
56
- if (!description && titleRef && titleRef.current) {
54
+ const handleMouseOver = React.useCallback(() => {
55
+ if (!description && titleRef?.current) {
57
56
  const isOver = isOverflown(titleRef.current);
58
57
  if (isOver) {
59
58
  setTooltip(label);
@@ -61,11 +60,12 @@ function GridColumnHeaderTitle(props) {
61
60
  setTooltip('');
62
61
  }
63
62
  }
64
- }, [titleRef, columnWidth, description, label]);
63
+ }, [description, label]);
65
64
  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
66
65
  title: description || tooltip
67
66
  }, rootProps.slotProps?.baseTooltip, {
68
67
  children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
68
+ onMouseOver: handleMouseOver,
69
69
  ref: titleRef,
70
70
  children: label
71
71
  })
@@ -20,8 +20,10 @@ function GridColumnHeaderMenu({
20
20
  const hideMenu = React.useCallback(event => {
21
21
  // Prevent triggering the sorting
22
22
  event.stopPropagation();
23
- apiRef.current.hideColumnMenu();
24
- }, [apiRef]);
23
+ if (!target?.contains(event.target)) {
24
+ apiRef.current.hideColumnMenu();
25
+ }
26
+ }, [apiRef, target]);
25
27
  if (!target) {
26
28
  return null;
27
29
  }
@@ -1,20 +1,20 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["defaultComponents", "defaultComponentsProps", "components", "componentsProps"];
3
+ const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
- import { useGridColumnMenuComponents } from '../../../hooks/features/columnMenu/useGridColumnMenuComponents';
6
+ import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
7
7
  import { GridColumnMenuContainer } from './GridColumnMenuContainer';
8
8
  import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
9
9
  import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
10
10
  import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
- export const GRID_COLUMN_MENU_COMPONENTS = {
13
- ColumnMenuSortItem: GridColumnMenuSortItem,
14
- ColumnMenuFilterItem: GridColumnMenuFilterItem,
15
- ColumnMenuColumnsItem: GridColumnMenuColumnsItem
12
+ export const GRID_COLUMN_MENU_SLOTS = {
13
+ columnMenuSortItem: GridColumnMenuSortItem,
14
+ columnMenuFilterItem: GridColumnMenuFilterItem,
15
+ columnMenuColumnsItem: GridColumnMenuColumnsItem
16
16
  };
17
- export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
17
+ export const GRID_COLUMN_MENU_SLOT_PROPS = {
18
18
  columnMenuSortItem: {
19
19
  displayOrder: 10
20
20
  },
@@ -27,29 +27,29 @@ export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
27
27
  };
28
28
  const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
29
29
  const {
30
- defaultComponents,
31
- defaultComponentsProps,
32
- components,
33
- componentsProps
30
+ defaultSlots,
31
+ defaultSlotProps,
32
+ slots,
33
+ slotProps
34
34
  } = props,
35
35
  other = _objectWithoutPropertiesLoose(props, _excluded);
36
- const orderedComponents = useGridColumnMenuComponents(_extends({}, other, {
37
- defaultComponents,
38
- defaultComponentsProps,
39
- components,
40
- componentsProps
36
+ const orderedSlots = useGridColumnMenuSlots(_extends({}, other, {
37
+ defaultSlots,
38
+ defaultSlotProps,
39
+ slots,
40
+ slotProps
41
41
  }));
42
42
  return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
43
43
  ref: ref
44
44
  }, other, {
45
- children: orderedComponents.map(([Component, componentProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, componentProps), index))
45
+ children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
46
46
  }));
47
47
  });
48
48
  const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
49
49
  return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
50
50
  ref: ref,
51
- defaultComponents: GRID_COLUMN_MENU_COMPONENTS,
52
- defaultComponentsProps: GRID_COLUMN_MENU_COMPONENTS_PROPS
51
+ defaultSlots: GRID_COLUMN_MENU_SLOTS,
52
+ defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
53
53
  }));
54
54
  });
55
55
  process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
@@ -58,20 +58,20 @@ process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
58
58
  // | To update them edit the TypeScript types and run "yarn proptypes" |
59
59
  // ----------------------------------------------------------------------
60
60
  colDef: PropTypes.object.isRequired,
61
- /**
62
- * `components` could be used to add new and (or) override default column menu items
63
- * If you register a nee component you must pass it's `displayOrder` in `componentsProps`
64
- * or it will be placed in the end of the list
65
- */
66
- components: PropTypes.object,
61
+ hideMenu: PropTypes.func.isRequired,
62
+ id: PropTypes.string,
63
+ labelledby: PropTypes.string,
64
+ open: PropTypes.bool.isRequired,
67
65
  /**
68
66
  * Could be used to pass new props or override props specific to a column menu component
69
67
  * e.g. `displayOrder`
70
68
  */
71
- componentsProps: PropTypes.object,
72
- hideMenu: PropTypes.func.isRequired,
73
- id: PropTypes.string,
74
- labelledby: PropTypes.string,
75
- open: PropTypes.bool.isRequired
69
+ slotProps: PropTypes.object,
70
+ /**
71
+ * `slots` could be used to add new and (or) override default column menu items
72
+ * If you register a nee component you must pass it's `displayOrder` in `slotProps`
73
+ * or it will be placed in the end of the list
74
+ */
75
+ slots: PropTypes.object
76
76
  } : void 0;
77
77
  export { GridColumnMenu, GridGenericColumnMenu };
@@ -143,7 +143,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
143
143
  logicOperators: logicOperators,
144
144
  columnsSort: columnsSort
145
145
  }, filterFormProps), item.id == null ? index : item.id))
146
- }), !rootProps.disableMultipleColumnsFiltering && !disableAddFilterButton && !disableRemoveAllButton ? /*#__PURE__*/_jsxs(GridPanelFooter, {
146
+ }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
147
147
  children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
148
148
  onClick: addNewFilter,
149
149
  startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
@@ -1 +1 @@
1
- export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './menu/columnMenu/GridColumnMenu';
1
+ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './menu/columnMenu/GridColumnMenu';
@@ -245,7 +245,12 @@ export const useGridColumnHeaders = props => {
245
245
  columnFields: groupStructure.columnFields.filter(field => columnVisibility[field] !== false)
246
246
  });
247
247
  }).filter(groupStructure => groupStructure.columnFields.length > 0);
248
- const leftOverflow = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
248
+ const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
249
+ const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
250
+ const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
251
+ const column = apiRef.current.getColumn(field);
252
+ return acc + (column.computedWidth ?? 0);
253
+ }, 0);
249
254
  let columnIndex = firstColumnToRender;
250
255
  const elements = visibleColumnGroupHeader.map(({
251
256
  groupId,
@@ -4,44 +4,39 @@ const _excluded = ["displayOrder"];
4
4
  import * as React from 'react';
5
5
  import Divider from '@mui/material/Divider';
6
6
  import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
7
- const camelize = pascalCase => {
8
- const camelCase = pascalCase.split('');
9
- camelCase[0] = camelCase[0].toLowerCase();
10
- return camelCase.join('');
11
- };
12
- const useGridColumnMenuComponents = props => {
7
+ const useGridColumnMenuSlots = props => {
13
8
  const apiRef = useGridPrivateApiContext();
14
9
  const {
15
- defaultComponents,
16
- defaultComponentsProps,
17
- components = {},
18
- componentsProps = {},
10
+ defaultSlots,
11
+ defaultSlotProps,
12
+ slots = {},
13
+ slotProps = {},
19
14
  hideMenu,
20
15
  colDef,
21
16
  addDividers = true
22
17
  } = props;
23
- const processedComponents = React.useMemo(() => _extends({}, defaultComponents, components), [defaultComponents, components]);
24
- const processedComponentsProps = React.useMemo(() => {
25
- if (!componentsProps || Object.keys(componentsProps).length === 0) {
26
- return defaultComponentsProps;
18
+ const processedComponents = React.useMemo(() => _extends({}, defaultSlots, slots), [defaultSlots, slots]);
19
+ const processedSlotProps = React.useMemo(() => {
20
+ if (!slotProps || Object.keys(slotProps).length === 0) {
21
+ return defaultSlotProps;
27
22
  }
28
- const mergedProps = _extends({}, componentsProps);
29
- Object.entries(defaultComponentsProps).forEach(([key, currentComponentProps]) => {
30
- mergedProps[key] = _extends({}, currentComponentProps, componentsProps[key] || {});
23
+ const mergedProps = _extends({}, slotProps);
24
+ Object.entries(defaultSlotProps).forEach(([key, currentSlotProps]) => {
25
+ mergedProps[key] = _extends({}, currentSlotProps, slotProps[key] || {});
31
26
  });
32
27
  return mergedProps;
33
- }, [defaultComponentsProps, componentsProps]);
28
+ }, [defaultSlotProps, slotProps]);
34
29
  const defaultItems = apiRef.current.unstable_applyPipeProcessors('columnMenu', [], props.colDef);
35
30
  const userItems = React.useMemo(() => {
36
- const defaultComponentKeys = Object.keys(defaultComponents);
37
- return Object.keys(components).filter(key => !defaultComponentKeys.includes(key));
38
- }, [components, defaultComponents]);
31
+ const defaultComponentKeys = Object.keys(defaultSlots);
32
+ return Object.keys(slots).filter(key => !defaultComponentKeys.includes(key));
33
+ }, [slots, defaultSlots]);
39
34
  return React.useMemo(() => {
40
35
  const uniqueItems = Array.from(new Set([...defaultItems, ...userItems]));
41
36
  const cleansedItems = uniqueItems.filter(key => processedComponents[key] != null);
42
37
  const sorted = cleansedItems.sort((a, b) => {
43
- const leftItemProps = processedComponentsProps[camelize(a)];
44
- const rightItemProps = processedComponentsProps[camelize(b)];
38
+ const leftItemProps = processedSlotProps[a];
39
+ const rightItemProps = processedSlotProps[b];
45
40
  const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
46
41
  const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
47
42
  return leftDisplayOrder - rightDisplayOrder;
@@ -51,13 +46,13 @@ const useGridColumnMenuComponents = props => {
51
46
  colDef,
52
47
  onClick: hideMenu
53
48
  };
54
- const processedComponentProps = processedComponentsProps[camelize(key)];
49
+ const processedComponentProps = processedSlotProps[key];
55
50
  if (processedComponentProps) {
56
51
  const customProps = _objectWithoutPropertiesLoose(processedComponentProps, _excluded);
57
52
  itemProps = _extends({}, itemProps, customProps);
58
53
  }
59
54
  return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [Divider, {}]] : [...acc, [processedComponents[key], itemProps]];
60
55
  }, []);
61
- }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedComponentsProps, userItems]);
56
+ }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems]);
62
57
  };
63
- export { useGridColumnMenuComponents };
58
+ export { useGridColumnMenuSlots };
@@ -226,7 +226,7 @@ export function useGridColumns(apiRef, props) {
226
226
  if (props.disableColumnSelector) {
227
227
  return columnMenuItems;
228
228
  }
229
- return [...columnMenuItems, 'ColumnMenuColumnsItem'];
229
+ return [...columnMenuItems, 'columnMenuColumnsItem'];
230
230
  }, [props.disableColumnSelector]);
231
231
  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItems);
232
232
  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
@@ -57,7 +57,7 @@ export const useGridFilter = (apiRef, props) => {
57
57
  if (colDef == null || colDef.filterable === false || props.disableColumnFilter) {
58
58
  return columnMenuItems;
59
59
  }
60
- return [...columnMenuItems, 'ColumnMenuFilterItem'];
60
+ return [...columnMenuItems, 'columnMenuFilterItem'];
61
61
  }, [props.disableColumnFilter]);
62
62
 
63
63
  /**
@@ -1,6 +1,6 @@
1
- var GridPreferencePanelsValue;
2
- (function (GridPreferencePanelsValue) {
1
+ var GridPreferencePanelsValue = /*#__PURE__*/function (GridPreferencePanelsValue) {
3
2
  GridPreferencePanelsValue["filters"] = "filters";
4
3
  GridPreferencePanelsValue["columns"] = "columns";
5
- })(GridPreferencePanelsValue || (GridPreferencePanelsValue = {}));
4
+ return GridPreferencePanelsValue;
5
+ }(GridPreferencePanelsValue || {});
6
6
  export { GridPreferencePanelsValue };
@@ -70,7 +70,7 @@ export const useGridSorting = (apiRef, props) => {
70
70
  }
71
71
  const sortingOrder = colDef.sortingOrder || props.sortingOrder;
72
72
  if (sortingOrder.some(item => !!item)) {
73
- return [...columnMenuItems, 'ColumnMenuSortItem'];
73
+ return [...columnMenuItems, 'columnMenuSortItem'];
74
74
  }
75
75
  return columnMenuItems;
76
76
  }, [props.sortingOrder]);
@@ -425,7 +425,7 @@ export const useGridVirtualScroller = props => {
425
425
  prevRootRowStyle.current = rootRowStyle;
426
426
  return rows;
427
427
  };
428
- const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth > containerDimensions.width;
428
+ const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth >= containerDimensions.width;
429
429
  const contentSize = React.useMemo(() => {
430
430
  // In cases where the columns exceed the available width,
431
431
  // the horizontal scrollbar should be shown even when there're no rows.
@@ -5,11 +5,11 @@ import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTra
5
5
  * Signal to the underlying logic what version of the public component API
6
6
  * of the data grid is exposed.
7
7
  */
8
- var GridSignature;
9
- (function (GridSignature) {
8
+ var GridSignature = /*#__PURE__*/function (GridSignature) {
10
9
  GridSignature["DataGrid"] = "DataGrid";
11
10
  GridSignature["DataGridPro"] = "DataGridPro";
12
- })(GridSignature || (GridSignature = {}));
11
+ return GridSignature;
12
+ }(GridSignature || {});
13
13
  // We use class to make it easier to detect in heap snapshots by name
14
14
  class ObjectToBeRetainedByReact {}
15
15
 
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid v6.0.2
2
+ * @mui/x-data-grid v6.0.4
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -22,7 +22,7 @@ export { GridColumnHeaders } from './components/GridColumnHeaders';
22
22
  /**
23
23
  * Reexportable components.
24
24
  */
25
- export { GridColumnMenu, GRID_COLUMN_MENU_COMPONENTS, GRID_COLUMN_MENU_COMPONENTS_PROPS } from './components/reexportable';
25
+ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './components/reexportable';
26
26
 
27
27
  /**
28
28
  * The full grid API.
@@ -20,17 +20,15 @@ const bgBGGrid = {
20
20
  toolbarFiltersTooltipShow: 'Покажи Филтрите',
21
21
  toolbarFiltersTooltipActive: count => `${count} активни филтри`,
22
22
  // Quick filter toolbar field
23
- // toolbarQuickFilterPlaceholder: 'Search…',
24
- // toolbarQuickFilterLabel: 'Search',
25
- // toolbarQuickFilterDeleteIconLabel: 'Clear',
26
-
23
+ toolbarQuickFilterPlaceholder: 'Търси…',
24
+ toolbarQuickFilterLabel: 'Търсене',
25
+ toolbarQuickFilterDeleteIconLabel: 'Изчисти',
27
26
  // Export selector toolbar button text
28
27
  toolbarExport: 'Изтегли',
29
28
  toolbarExportLabel: 'Изтегли',
30
29
  toolbarExportCSV: 'Изтегли като CSV',
31
30
  toolbarExportPrint: 'Принтиране',
32
- // toolbarExportExcel: 'Download as Excel',
33
-
31
+ toolbarExportExcel: 'Изтегли като Excel',
34
32
  // Columns panel text
35
33
  columnsPanelTextFieldLabel: 'Намери колона',
36
34
  columnsPanelTextFieldPlaceholder: 'Заглавие на колона',
@@ -39,9 +37,9 @@ const bgBGGrid = {
39
37
  columnsPanelHideAllButton: 'Скрий Всички',
40
38
  // Filter panel text
41
39
  filterPanelAddFilter: 'Добави Филтър',
42
- // filterPanelRemoveAll: 'Remove all',
40
+ filterPanelRemoveAll: 'Премахни всички',
43
41
  filterPanelDeleteIconLabel: 'Изтрий',
44
- // filterPanelLogicOperator: 'Logic operator',
42
+ filterPanelLogicOperator: 'Логически оператор',
45
43
  filterPanelOperator: 'Оператори',
46
44
  filterPanelOperatorAnd: 'И',
47
45
  filterPanelOperatorOr: 'Или',
@@ -69,7 +67,7 @@ const bgBGGrid = {
69
67
  // Column menu text
70
68
  columnMenuLabel: 'Меню',
71
69
  columnMenuShowColumns: 'Покажи колоните',
72
- // columnMenuManageColumns: 'Manage columns',
70
+ columnMenuManageColumns: 'Управление на колони',
73
71
  columnMenuFilter: 'Филтри',
74
72
  columnMenuHideColumn: 'Скрий',
75
73
  columnMenuUnsort: 'Отмени сортирането',
@@ -111,10 +109,9 @@ const bgBGGrid = {
111
109
  // Master/detail
112
110
  // detailPanelToggle: 'Detail panel toggle',
113
111
  expandDetailPanel: 'Разгъване',
114
- collapseDetailPanel: 'Свиване'
115
-
112
+ collapseDetailPanel: 'Свиване',
116
113
  // Row reordering text
117
- // rowReorderingHeaderName: 'Row reordering',
114
+ rowReorderingHeaderName: 'Подредба на редове'
118
115
 
119
116
  // Aggregation
120
117
  // aggregationMenuItemHeader: 'Aggregation',
@@ -20,17 +20,15 @@ const daDKGrid = {
20
20
  toolbarFiltersTooltipShow: 'Vis filtre',
21
21
  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktive filtre` : `${count} aktivt filter`,
22
22
  // Quick filter toolbar field
23
- // toolbarQuickFilterPlaceholder: 'Search…',
24
- // toolbarQuickFilterLabel: 'Search',
25
- // toolbarQuickFilterDeleteIconLabel: 'Clear',
26
-
23
+ toolbarQuickFilterPlaceholder: 'Søg…',
24
+ toolbarQuickFilterLabel: 'Søg',
25
+ toolbarQuickFilterDeleteIconLabel: 'Ryd',
27
26
  // Export selector toolbar button text
28
- // toolbarExport: 'Export',
27
+ toolbarExport: 'Eksport',
29
28
  toolbarExportLabel: 'Eksporter',
30
29
  toolbarExportCSV: 'Download som CSV',
31
30
  toolbarExportPrint: 'Print',
32
- // toolbarExportExcel: 'Download as Excel',
33
-
31
+ toolbarExportExcel: 'Download som Excel',
34
32
  // Columns panel text
35
33
  columnsPanelTextFieldLabel: 'Find kolonne',
36
34
  columnsPanelTextFieldPlaceholder: 'Kolonne titel',
@@ -39,7 +37,7 @@ const daDKGrid = {
39
37
  columnsPanelHideAllButton: 'Skjul alle',
40
38
  // Filter panel text
41
39
  filterPanelAddFilter: 'Tilføj filter',
42
- // filterPanelRemoveAll: 'Remove all',
40
+ filterPanelRemoveAll: 'Fjern alle',
43
41
  filterPanelDeleteIconLabel: 'Slet',
44
42
  filterPanelLogicOperator: 'Logisk operator',
45
43
  filterPanelOperator: 'Operatorer',
@@ -69,7 +67,7 @@ const daDKGrid = {
69
67
  // Column menu text
70
68
  columnMenuLabel: 'Menu',
71
69
  columnMenuShowColumns: 'Vis Kolonner',
72
- // columnMenuManageColumns: 'Manage columns',
70
+ columnMenuManageColumns: 'Administrer kolonner',
73
71
  columnMenuFilter: 'Filtre',
74
72
  columnMenuHideColumn: 'Skjul',
75
73
  columnMenuUnsort: 'Fjern sortering',
@@ -109,20 +107,17 @@ const daDKGrid = {
109
107
  groupColumn: name => `Gruppér efter ${name}`,
110
108
  unGroupColumn: name => `Fjern gruppéring efter ${name}`,
111
109
  // Master/detail
112
- // detailPanelToggle: 'Detail panel toggle',
110
+ detailPanelToggle: 'Udvid/kollaps detaljepanel',
113
111
  expandDetailPanel: 'Udvid',
114
- collapseDetailPanel: 'Kollaps'
115
-
112
+ collapseDetailPanel: 'Kollaps',
116
113
  // Row reordering text
117
- // rowReorderingHeaderName: 'Row reordering',
118
-
114
+ rowReorderingHeaderName: 'Omarrangering af rækker',
119
115
  // Aggregation
120
- // aggregationMenuItemHeader: 'Aggregation',
121
- // aggregationFunctionLabelSum: 'sum',
122
- // aggregationFunctionLabelAvg: 'avg',
123
- // aggregationFunctionLabelMin: 'min',
124
- // aggregationFunctionLabelMax: 'max',
125
- // aggregationFunctionLabelSize: 'size',
116
+ aggregationMenuItemHeader: 'Aggregation',
117
+ aggregationFunctionLabelSum: 'sum',
118
+ aggregationFunctionLabelAvg: 'gns',
119
+ aggregationFunctionLabelMin: 'min',
120
+ aggregationFunctionLabelMax: 'max',
121
+ aggregationFunctionLabelSize: 'størrelse'
126
122
  };
127
-
128
123
  export const daDK = getGridLocalization(daDKGrid, daDKCore);
@@ -67,7 +67,7 @@ const esESGrid = {
67
67
  // Column menu text
68
68
  columnMenuLabel: 'Menú',
69
69
  columnMenuShowColumns: 'Mostrar columnas',
70
- // columnMenuManageColumns: 'Manage columns',
70
+ columnMenuManageColumns: 'Administrar columnas',
71
71
  columnMenuFilter: 'Filtro',
72
72
  columnMenuHideColumn: 'Ocultar',
73
73
  columnMenuUnsort: 'Desordenar',
@@ -37,7 +37,7 @@ const faIRGrid = {
37
37
  columnsPanelHideAllButton: 'مخفی همه',
38
38
  // Filter panel text
39
39
  filterPanelAddFilter: 'افزودن فیلتر',
40
- // filterPanelRemoveAll: 'Remove all',
40
+ filterPanelRemoveAll: 'حذف همه',
41
41
  filterPanelDeleteIconLabel: 'حذف',
42
42
  filterPanelLogicOperator: 'عملگر منطقی',
43
43
  filterPanelOperator: 'عملگرها',
@@ -67,7 +67,7 @@ const faIRGrid = {
67
67
  // Column menu text
68
68
  columnMenuLabel: 'فهرست',
69
69
  columnMenuShowColumns: 'نمایش ستون‌ها',
70
- // columnMenuManageColumns: 'Manage columns',
70
+ columnMenuManageColumns: 'مدیریت ستون‌ها',
71
71
  columnMenuFilter: 'فیلتر',
72
72
  columnMenuHideColumn: 'مخفی',
73
73
  columnMenuUnsort: 'نامرتب‌کردن',
@@ -37,7 +37,7 @@ const nbNOGrid = {
37
37
  columnsPanelHideAllButton: 'Skjul alle',
38
38
  // Filter panel text
39
39
  filterPanelAddFilter: 'Legg til filter',
40
- // filterPanelRemoveAll: 'Remove all',
40
+ filterPanelRemoveAll: 'Fjern alle',
41
41
  filterPanelDeleteIconLabel: 'Slett',
42
42
  filterPanelLogicOperator: 'Logisk operator',
43
43
  filterPanelOperator: 'Operatører',
@@ -67,7 +67,7 @@ const nbNOGrid = {
67
67
  // Column menu text
68
68
  columnMenuLabel: 'Meny',
69
69
  columnMenuShowColumns: 'Vis kolonner',
70
- // columnMenuManageColumns: 'Manage columns',
70
+ columnMenuManageColumns: 'Administrer kolonner',
71
71
  columnMenuFilter: 'Filter',
72
72
  columnMenuHideColumn: 'Skjul',
73
73
  columnMenuUnsort: 'Usorter',
@@ -107,19 +107,17 @@ const nbNOGrid = {
107
107
  groupColumn: name => `Grupper på ${name}`,
108
108
  unGroupColumn: name => `Stopp å grupper på ${name}`,
109
109
  // Master/detail
110
- // detailPanelToggle: 'Detail panel toggle',
110
+ detailPanelToggle: 'Utvid/kollaps detalj panel',
111
111
  expandDetailPanel: 'Utvid',
112
112
  collapseDetailPanel: 'Kollaps',
113
113
  // Row reordering text
114
- rowReorderingHeaderName: 'Rad reorganisering'
115
-
114
+ rowReorderingHeaderName: 'Rad reorganisering',
116
115
  // Aggregation
117
- // aggregationMenuItemHeader: 'Aggregation',
118
- // aggregationFunctionLabelSum: 'sum',
119
- // aggregationFunctionLabelAvg: 'avg',
120
- // aggregationFunctionLabelMin: 'min',
121
- // aggregationFunctionLabelMax: 'max',
122
- // aggregationFunctionLabelSize: 'size',
116
+ aggregationMenuItemHeader: 'Aggregering',
117
+ aggregationFunctionLabelSum: 'sum',
118
+ aggregationFunctionLabelAvg: 'snitt',
119
+ aggregationFunctionLabelMin: 'min',
120
+ aggregationFunctionLabelMax: 'maks',
121
+ aggregationFunctionLabelSize: 'størrelse'
123
122
  };
124
-
125
123
  export const nbNO = getGridLocalization(nbNOGrid, nbNOCore);
@@ -111,15 +111,13 @@ const nlNLGrid = {
111
111
  expandDetailPanel: 'Uitklappen',
112
112
  collapseDetailPanel: 'Inklappen',
113
113
  // Row reordering text
114
- rowReorderingHeaderName: 'Rijen hersorteren'
115
-
114
+ rowReorderingHeaderName: 'Rijen hersorteren',
116
115
  // Aggregation
117
- // aggregationMenuItemHeader: 'Aggregation',
118
- // aggregationFunctionLabelSum: 'sum',
119
- // aggregationFunctionLabelAvg: 'avg',
120
- // aggregationFunctionLabelMin: 'min',
121
- // aggregationFunctionLabelMax: 'max',
122
- // aggregationFunctionLabelSize: 'size',
116
+ aggregationMenuItemHeader: 'Aggregatie',
117
+ aggregationFunctionLabelSum: 'som',
118
+ aggregationFunctionLabelAvg: 'gem',
119
+ aggregationFunctionLabelMin: 'min',
120
+ aggregationFunctionLabelMax: 'max',
121
+ aggregationFunctionLabelSize: 'grootte'
123
122
  };
124
-
125
123
  export const nlNL = getGridLocalization(nlNLGrid, nlNLCore);