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

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 (176) hide show
  1. package/CHANGELOG.md +377 -0
  2. package/DataGrid/DataGrid.js +7 -11
  3. package/DataGrid/useDataGridProps.js +3 -3
  4. package/README.md +1 -1
  5. package/components/GridRow.js +13 -2
  6. package/components/cell/GridActionsCell.js +8 -1
  7. package/components/cell/GridActionsCellItem.js +4 -6
  8. package/components/cell/GridCell.js +1 -1
  9. package/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js +6 -11
  10. package/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js +6 -11
  11. package/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js +6 -11
  12. package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +13 -22
  13. package/components/panel/GridColumnsPanel.js +1 -2
  14. package/components/panel/GridPanelContent.js +7 -3
  15. package/components/panel/GridPanelFooter.d.ts +1 -1
  16. package/components/panel/GridPanelFooter.js +4 -3
  17. package/components/panel/filterPanel/GridFilterForm.js +15 -15
  18. package/components/toolbar/GridToolbarDensitySelector.js +3 -5
  19. package/components/toolbar/GridToolbarFilterButton.d.ts +1 -1
  20. package/components/toolbar/GridToolbarFilterButton.js +3 -0
  21. package/components/toolbar/GridToolbarQuickFilter.js +27 -23
  22. package/components/virtualization/GridMainContainer.js +1 -1
  23. package/constants/dataGridPropsDefaultValues.js +1 -1
  24. package/hooks/core/useGridStateInitialization.js +3 -3
  25. package/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts +4 -4
  26. package/hooks/features/columnHeaders/useGridColumnHeaders.js +10 -3
  27. package/hooks/features/columnResize/columnResizeSelector.d.ts +1 -1
  28. package/hooks/features/columnResize/gridColumnResizeApi.d.ts +6 -0
  29. package/hooks/features/columnResize/gridColumnResizeApi.js +2 -1
  30. package/hooks/features/columnResize/useGridColumnResize.d.ts +1 -1
  31. package/hooks/features/columnResize/useGridColumnResize.js +9 -4
  32. package/hooks/features/columns/gridColumnsSelector.d.ts +12 -12
  33. package/hooks/features/columns/gridColumnsUtils.d.ts +1 -1
  34. package/hooks/features/columns/gridColumnsUtils.js +2 -1
  35. package/hooks/features/density/densitySelector.d.ts +1 -1
  36. package/hooks/features/filter/gridFilterSelector.d.ts +17 -17
  37. package/hooks/features/filter/useGridFilter.js +1 -1
  38. package/hooks/features/focus/gridFocusStateSelector.d.ts +8 -8
  39. package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts +3 -3
  40. package/hooks/features/overlays/useGridOverlays.js +3 -1
  41. package/hooks/features/pagination/gridPaginationSelector.d.ts +15 -9
  42. package/hooks/features/rowSelection/gridRowSelectionSelector.d.ts +3 -3
  43. package/hooks/features/rowSelection/useGridRowSelection.js +5 -4
  44. package/hooks/features/rowSelection/utils.d.ts +1 -1
  45. package/hooks/features/rows/gridRowSpanningSelectors.d.ts +3 -3
  46. package/hooks/features/rows/gridRowsSelector.d.ts +23 -12
  47. package/hooks/features/rows/useGridRowSpanning.d.ts +1 -1
  48. package/hooks/features/rows/useGridRowSpanning.js +16 -8
  49. package/hooks/features/rows/useGridRows.js +5 -5
  50. package/hooks/features/sorting/gridSortingSelector.d.ts +10 -5
  51. package/hooks/features/sorting/gridSortingSelector.js +11 -0
  52. package/hooks/features/sorting/index.d.ts +2 -1
  53. package/hooks/features/sorting/index.js +1 -1
  54. package/hooks/features/sorting/useGridSorting.js +1 -1
  55. package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts +5 -5
  56. package/hooks/features/virtualization/useGridVirtualScroller.js +11 -8
  57. package/hooks/utils/useGridSelector.d.ts +4 -6
  58. package/hooks/utils/useGridSelector.js +6 -44
  59. package/index.js +1 -1
  60. package/internals/index.d.ts +2 -2
  61. package/internals/index.js +2 -2
  62. package/internals/utils/index.d.ts +0 -1
  63. package/internals/utils/index.js +0 -1
  64. package/locales/koKR.js +45 -49
  65. package/locales/roRO.js +18 -20
  66. package/material/index.js +30 -4
  67. package/models/api/gridStateApi.d.ts +1 -1
  68. package/models/controlStateItem.d.ts +2 -2
  69. package/models/gridBaseSlots.d.ts +21 -0
  70. package/models/gridBaseSlots.js +1 -0
  71. package/models/gridSlotsComponentsProps.d.ts +25 -5
  72. package/models/props/DataGridProps.d.ts +1 -6
  73. package/modern/DataGrid/DataGrid.js +7 -11
  74. package/modern/DataGrid/useDataGridProps.js +3 -3
  75. package/modern/components/GridRow.js +13 -2
  76. package/modern/components/cell/GridActionsCell.js +8 -1
  77. package/modern/components/cell/GridActionsCellItem.js +4 -6
  78. package/modern/components/cell/GridCell.js +1 -1
  79. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js +6 -11
  80. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js +6 -11
  81. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js +6 -11
  82. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +13 -22
  83. package/modern/components/panel/GridColumnsPanel.js +1 -2
  84. package/modern/components/panel/GridPanelContent.js +7 -3
  85. package/modern/components/panel/GridPanelFooter.js +4 -3
  86. package/modern/components/panel/filterPanel/GridFilterForm.js +15 -15
  87. package/modern/components/toolbar/GridToolbarDensitySelector.js +3 -5
  88. package/modern/components/toolbar/GridToolbarFilterButton.js +3 -0
  89. package/modern/components/toolbar/GridToolbarQuickFilter.js +27 -23
  90. package/modern/components/virtualization/GridMainContainer.js +1 -1
  91. package/modern/constants/dataGridPropsDefaultValues.js +1 -1
  92. package/modern/hooks/core/useGridStateInitialization.js +3 -3
  93. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +10 -3
  94. package/modern/hooks/features/columnResize/gridColumnResizeApi.js +2 -1
  95. package/modern/hooks/features/columnResize/useGridColumnResize.js +9 -4
  96. package/modern/hooks/features/columns/gridColumnsUtils.js +2 -1
  97. package/modern/hooks/features/filter/useGridFilter.js +1 -1
  98. package/modern/hooks/features/overlays/useGridOverlays.js +3 -1
  99. package/modern/hooks/features/rowSelection/useGridRowSelection.js +5 -4
  100. package/modern/hooks/features/rows/useGridRowSpanning.js +16 -8
  101. package/modern/hooks/features/rows/useGridRows.js +5 -5
  102. package/modern/hooks/features/sorting/gridSortingSelector.js +11 -0
  103. package/modern/hooks/features/sorting/index.js +1 -1
  104. package/modern/hooks/features/sorting/useGridSorting.js +1 -1
  105. package/modern/hooks/features/virtualization/useGridVirtualScroller.js +11 -8
  106. package/modern/hooks/utils/useGridSelector.js +6 -44
  107. package/modern/index.js +1 -1
  108. package/modern/internals/index.js +2 -2
  109. package/modern/internals/utils/index.js +0 -1
  110. package/modern/locales/koKR.js +45 -49
  111. package/modern/locales/roRO.js +18 -20
  112. package/modern/material/index.js +30 -4
  113. package/modern/models/gridBaseSlots.js +1 -0
  114. package/modern/utils/createSelector.js +1 -120
  115. package/node/DataGrid/DataGrid.js +7 -11
  116. package/node/DataGrid/useDataGridProps.js +2 -2
  117. package/node/components/GridRow.js +13 -2
  118. package/node/components/cell/GridActionsCell.js +8 -1
  119. package/node/components/cell/GridActionsCellItem.js +3 -5
  120. package/node/components/cell/GridCell.js +1 -1
  121. package/node/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js +5 -10
  122. package/node/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js +5 -10
  123. package/node/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js +5 -10
  124. package/node/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +13 -22
  125. package/node/components/panel/GridColumnsPanel.js +1 -2
  126. package/node/components/panel/GridPanelContent.js +7 -3
  127. package/node/components/panel/GridPanelFooter.js +5 -4
  128. package/node/components/panel/filterPanel/GridFilterForm.js +15 -15
  129. package/node/components/toolbar/GridToolbarDensitySelector.js +3 -5
  130. package/node/components/toolbar/GridToolbarFilterButton.js +3 -0
  131. package/node/components/toolbar/GridToolbarQuickFilter.js +27 -23
  132. package/node/components/virtualization/GridMainContainer.js +1 -1
  133. package/node/constants/dataGridPropsDefaultValues.js +1 -1
  134. package/node/hooks/core/useGridStateInitialization.js +3 -3
  135. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +10 -3
  136. package/node/hooks/features/columnResize/gridColumnResizeApi.js +2 -1
  137. package/node/hooks/features/columnResize/useGridColumnResize.js +9 -4
  138. package/node/hooks/features/columns/gridColumnsUtils.js +2 -1
  139. package/node/hooks/features/filter/useGridFilter.js +1 -1
  140. package/node/hooks/features/overlays/useGridOverlays.js +3 -1
  141. package/node/hooks/features/rowSelection/useGridRowSelection.js +5 -4
  142. package/node/hooks/features/rows/useGridRowSpanning.js +16 -8
  143. package/node/hooks/features/rows/useGridRows.js +5 -5
  144. package/node/hooks/features/sorting/gridSortingSelector.js +12 -1
  145. package/node/hooks/features/sorting/index.js +24 -16
  146. package/node/hooks/features/sorting/useGridSorting.js +1 -1
  147. package/node/hooks/features/virtualization/useGridVirtualScroller.js +11 -8
  148. package/node/hooks/utils/useGridSelector.js +8 -47
  149. package/node/index.js +1 -1
  150. package/node/internals/index.js +8 -22
  151. package/node/internals/utils/index.js +0 -11
  152. package/node/locales/koKR.js +45 -49
  153. package/node/locales/roRO.js +18 -20
  154. package/node/material/index.js +31 -4
  155. package/node/models/gridBaseSlots.js +5 -0
  156. package/node/utils/createSelector.js +4 -125
  157. package/package.json +2 -2
  158. package/utils/createSelector.d.ts +4 -16
  159. package/utils/createSelector.js +1 -120
  160. package/internals/utils/useProps.d.ts +0 -1
  161. package/internals/utils/useProps.js +0 -24
  162. package/joy/icons.d.ts +0 -32
  163. package/joy/icons.js +0 -431
  164. package/joy/index.d.ts +0 -2
  165. package/joy/index.js +0 -2
  166. package/joy/joySlots.d.ts +0 -3
  167. package/joy/joySlots.js +0 -389
  168. package/joy/package.json +0 -6
  169. package/modern/internals/utils/useProps.js +0 -24
  170. package/modern/joy/icons.js +0 -431
  171. package/modern/joy/index.js +0 -2
  172. package/modern/joy/joySlots.js +0 -389
  173. package/node/internals/utils/useProps.js +0 -30
  174. package/node/joy/icons.js +0 -439
  175. package/node/joy/index.js +0 -13
  176. package/node/joy/joySlots.js +0 -397
@@ -1,397 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
- var React = _interopRequireWildcard(require("react"));
12
- var _Badge = _interopRequireDefault(require("@mui/joy/Badge"));
13
- var _Checkbox = _interopRequireDefault(require("@mui/joy/Checkbox"));
14
- var _Divider = _interopRequireDefault(require("@mui/joy/Divider"));
15
- var _Input = _interopRequireDefault(require("@mui/joy/Input"));
16
- var _FormControl = _interopRequireDefault(require("@mui/joy/FormControl"));
17
- var _FormLabel = _interopRequireDefault(require("@mui/joy/FormLabel"));
18
- var _Button = _interopRequireDefault(require("@mui/joy/Button"));
19
- var _IconButton = _interopRequireDefault(require("@mui/joy/IconButton"));
20
- var _Select = _interopRequireDefault(require("@mui/joy/Select"));
21
- var _Option = _interopRequireDefault(require("@mui/joy/Option"));
22
- var _Box = _interopRequireDefault(require("@mui/joy/Box"));
23
- var _Typography = _interopRequireDefault(require("@mui/joy/Typography"));
24
- var _CircularProgress = _interopRequireDefault(require("@mui/joy/CircularProgress"));
25
- var _Tooltip = _interopRequireDefault(require("@mui/joy/Tooltip"));
26
- var _utils = require("@mui/utils");
27
- var _icons = _interopRequireWildcard(require("./icons"));
28
- var _useGridApiContext = require("../hooks/utils/useGridApiContext");
29
- var _useGridRootProps = require("../hooks/utils/useGridRootProps");
30
- var _hooks = require("../hooks");
31
- var _GridOverlay = require("../components/containers/GridOverlay");
32
- var _jsxRuntime = require("react/jsx-runtime");
33
- const _excluded = ["slotProps", "variant", "color", "sx", "anchorOrigin"],
34
- _excluded2 = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
35
- _excluded3 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
36
- _excluded4 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
37
- _excluded5 = ["color", "size", "sx", "touchRippleRef"],
38
- _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
39
- _excluded7 = ["native"],
40
- _excluded8 = ["shrink", "variant", "sx"];
41
- function convertColor(color) {
42
- if (color === 'secondary') {
43
- return 'primary';
44
- }
45
- if (color === 'error') {
46
- return 'danger';
47
- }
48
- if (color === 'default' || color === 'inherit') {
49
- return 'neutral';
50
- }
51
- return color;
52
- }
53
- function convertSize(size) {
54
- return size ? {
55
- small: 'sm',
56
- medium: 'md',
57
- large: 'lg'
58
- }[size] : size;
59
- }
60
- function convertVariant(variant, defaultVariant = 'plain') {
61
- if (!variant) {
62
- return defaultVariant;
63
- }
64
- return {
65
- standard: 'outlined',
66
- outlined: 'outlined',
67
- contained: 'solid',
68
- text: 'plain',
69
- filled: 'soft'
70
- }[variant] || defaultVariant;
71
- }
72
- const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
73
- let {
74
- color,
75
- sx,
76
- anchorOrigin
77
- } = _ref,
78
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
79
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, props, {
80
- anchorOrigin: anchorOrigin?.horizontal && anchorOrigin?.vertical ? anchorOrigin : {
81
- vertical: 'top',
82
- horizontal: 'right'
83
- },
84
- color: convertColor(color),
85
- variant: "plain",
86
- sx: sx,
87
- ref: ref
88
- }));
89
- });
90
- const Checkbox = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
91
- let {
92
- inputProps,
93
- onChange,
94
- checked,
95
- inputRef
96
- } = _ref2,
97
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
98
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, props, {
99
- slotProps: {
100
- input: (0, _extends2.default)({}, inputProps, {
101
- ref: inputRef
102
- })
103
- },
104
- ref: ref,
105
- checked: checked,
106
- onChange: onChange
107
- }));
108
- });
109
- const TextField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
110
- let {
111
- onChange,
112
- label,
113
- placeholder,
114
- value,
115
- inputRef,
116
- type,
117
- size,
118
- variant
119
- } = _ref3,
120
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref3, _excluded3);
121
- const rootRef = (0, _utils.unstable_useForkRef)(ref, props.InputProps?.ref);
122
- const inputForkRef = (0, _utils.unstable_useForkRef)(inputRef, props?.inputProps?.ref);
123
- const {
124
- startAdornment,
125
- endAdornment
126
- } = props.InputProps || {};
127
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
128
- ref: rootRef,
129
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
130
- children: label
131
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
132
- type: type,
133
- value: value,
134
- onChange: onChange,
135
- placeholder: placeholder,
136
- variant: convertVariant(variant, 'outlined'),
137
- size: convertSize(size),
138
- slotProps: {
139
- input: (0, _extends2.default)({}, props?.inputProps, {
140
- ref: inputForkRef
141
- })
142
- },
143
- startDecorator: startAdornment,
144
- endDecorator: endAdornment
145
- })]
146
- });
147
- });
148
- const Button = /*#__PURE__*/React.forwardRef(function Button(_ref4, ref) {
149
- let {
150
- startIcon,
151
- color,
152
- endIcon,
153
- size,
154
- sx,
155
- variant
156
- } = _ref4,
157
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref4, _excluded4);
158
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, props, {
159
- size: convertSize(size),
160
- color: convertColor(color),
161
- variant: convertVariant(variant),
162
- ref: ref,
163
- startDecorator: startIcon,
164
- endDecorator: endIcon,
165
- sx: sx
166
- }));
167
- });
168
- const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref5, ref) {
169
- let {
170
- color,
171
- size,
172
- sx
173
- } = _ref5,
174
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref5, _excluded5);
175
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, props, {
176
- size: convertSize(size),
177
- color: convertColor(color) ?? 'neutral',
178
- variant: "plain",
179
- ref: ref,
180
- sx: sx
181
- }));
182
- });
183
- const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
184
- let {
185
- open,
186
- onOpen,
187
- value,
188
- onChange,
189
- size,
190
- color,
191
- variant,
192
- MenuProps,
193
- inputRef,
194
- labelId
195
- } = _ref6,
196
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref6, _excluded6);
197
- const handleChange = (event, newValue) => {
198
- if (event && onChange) {
199
- // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
200
-
201
- // Redefine target to allow name and value to be read.
202
- // This allows seamless integration with the most popular form libraries.
203
- // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
204
- // Clone the event to not override `target` of the original event.
205
- const nativeEvent = event.nativeEvent || event;
206
- // @ts-ignore The nativeEvent is function, not object
207
- const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
208
- Object.defineProperty(clonedEvent, 'target', {
209
- writable: true,
210
- value: {
211
- value: newValue,
212
- name: props.name
213
- }
214
- });
215
- onChange(clonedEvent, null);
216
- }
217
- };
218
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({}, props, {
219
- listboxOpen: open,
220
- onListboxOpenChange: isOpen => {
221
- if (isOpen) {
222
- onOpen?.({});
223
- } else {
224
- MenuProps?.onClose?.({}, undefined);
225
- }
226
- },
227
- size: convertSize(size),
228
- color: convertColor(color),
229
- variant: convertVariant(variant, 'outlined'),
230
- ref: ref,
231
- value: value,
232
- onChange: handleChange,
233
- slotProps: {
234
- button: {
235
- 'aria-labelledby': labelId,
236
- ref: inputRef
237
- },
238
- listbox: {
239
- disablePortal: false,
240
- sx: {
241
- zIndex: 1350
242
- }
243
- }
244
- }
245
- }));
246
- });
247
- const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
248
- let props = (0, _objectWithoutPropertiesLoose2.default)(_ref7, _excluded7);
249
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Option.default, (0, _extends2.default)({}, props, {
250
- ref: ref
251
- }));
252
- });
253
- const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
254
- let {
255
- sx
256
- } = _ref8,
257
- props = (0, _objectWithoutPropertiesLoose2.default)(_ref8, _excluded8);
258
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, (0, _extends2.default)({}, props, {
259
- ref: ref,
260
- sx: sx
261
- }));
262
- });
263
- function labelDisplayedRows({
264
- from,
265
- to,
266
- count
267
- }) {
268
- return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
269
- }
270
- const getLabelDisplayedRowsTo = ({
271
- page,
272
- pageSize,
273
- rowCount
274
- }) => {
275
- if (rowCount === -1) {
276
- return (page + 1) * pageSize;
277
- }
278
- return pageSize === -1 ? rowCount : Math.min(rowCount, (page + 1) * pageSize);
279
- };
280
- const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
281
- const apiRef = (0, _useGridApiContext.useGridApiContext)();
282
- const rootProps = (0, _useGridRootProps.useGridRootProps)();
283
- const paginationModel = (0, _hooks.gridPaginationModelSelector)(apiRef);
284
- const visibleTopLevelRowCount = (0, _hooks.gridFilteredTopLevelRowCountSelector)(apiRef);
285
- const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
286
- const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
287
- const handlePageChange = React.useCallback(page => {
288
- apiRef.current.setPage(page);
289
- }, [apiRef]);
290
- const page = paginationModel.page <= lastPage ? paginationModel.page : lastPage;
291
- const pageSize = paginationModel.pageSize;
292
- const isPageSizeIncludedInPageSizeOptions = () => {
293
- for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
294
- const option = rootProps.pageSizeOptions[i];
295
- if (typeof option === 'number') {
296
- if (option === pageSize) {
297
- return true;
298
- }
299
- } else if (option.value === pageSize) {
300
- return true;
301
- }
302
- }
303
- return false;
304
- };
305
- const pageSizeOptions = isPageSizeIncludedInPageSizeOptions() ? rootProps.pageSizeOptions : [];
306
- const handleChangeRowsPerPage = (event, newValue) => {
307
- const newPageSize = Number(newValue);
308
- apiRef.current.setPageSize(newPageSize);
309
- };
310
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
311
- sx: {
312
- display: 'flex',
313
- alignItems: 'center',
314
- gap: 2,
315
- justifyContent: 'flex-end',
316
- px: 2
317
- },
318
- ref: ref,
319
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
320
- orientation: "horizontal",
321
- size: "sm",
322
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormLabel.default, {
323
- children: "Rows per page:"
324
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
325
- onChange: handleChangeRowsPerPage,
326
- value: pageSize,
327
- children: pageSizeOptions.map(option => {
328
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Option, {
329
- value: typeof option !== 'number' && option.value ? option.value : option,
330
- children: typeof option !== 'number' && option.label ? option.label : `${option}`
331
- }, typeof option !== 'number' && option.label ? option.label : `${option}`);
332
- })
333
- })]
334
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
335
- textAlign: "center",
336
- fontSize: "xs",
337
- fontWeight: "md",
338
- children: labelDisplayedRows({
339
- from: rowCount === 0 ? 0 : page * pageSize + 1,
340
- to: getLabelDisplayedRowsTo({
341
- page,
342
- pageSize,
343
- rowCount
344
- }),
345
- count: rowCount === -1 ? -1 : rowCount
346
- })
347
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
348
- sx: {
349
- display: 'flex',
350
- gap: 0.5
351
- },
352
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
353
- size: "sm",
354
- color: "neutral",
355
- variant: "outlined",
356
- disabled: page === 0,
357
- onClick: () => handlePageChange(page - 1),
358
- sx: {
359
- bgcolor: 'background.surface'
360
- },
361
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridKeyboardArrowLeft, {})
362
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
363
- size: "sm",
364
- color: "neutral",
365
- variant: "outlined",
366
- disabled: rowCount !== -1 ? page >= Math.ceil(rowCount / pageSize) - 1 : false,
367
- onClick: () => handlePageChange(page + 1),
368
- sx: {
369
- bgcolor: 'background.surface'
370
- },
371
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridKeyboardArrowRight, {})
372
- })]
373
- })]
374
- });
375
- });
376
- const LoadingOverlay = /*#__PURE__*/React.forwardRef((props, ref) => {
377
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlay.GridOverlay, (0, _extends2.default)({}, props, {
378
- ref: ref,
379
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
380
- }));
381
- });
382
- const joySlots = (0, _extends2.default)({}, _icons.default, {
383
- baseBadge: Badge,
384
- baseCheckbox: Checkbox,
385
- baseDivider: _Divider.default,
386
- baseTextField: TextField,
387
- baseButton: Button,
388
- baseIconButton: IconButton,
389
- baseSelect: Select,
390
- baseSelectOption: Option,
391
- baseInputLabel: InputLabel,
392
- baseFormControl: _FormControl.default /* FIXME: typing error */,
393
- baseTooltip: _Tooltip.default /* FIXME: typing error */,
394
- pagination: Pagination,
395
- loadingOverlay: LoadingOverlay
396
- });
397
- var _default = exports.default = joySlots;