@mui/x-data-grid 8.0.0-alpha.4 → 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 (90) hide show
  1. package/CHANGELOG.md +103 -0
  2. package/DataGrid/DataGrid.js +2 -6
  3. package/DataGrid/useDataGridProps.js +3 -3
  4. package/components/GridRow.js +12 -1
  5. package/components/cell/GridActionsCellItem.js +4 -6
  6. package/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js +6 -11
  7. package/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js +6 -11
  8. package/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js +6 -11
  9. package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +13 -22
  10. package/components/toolbar/GridToolbarDensitySelector.js +3 -5
  11. package/components/toolbar/GridToolbarFilterButton.d.ts +1 -1
  12. package/components/toolbar/GridToolbarFilterButton.js +3 -0
  13. package/components/toolbar/GridToolbarQuickFilter.js +27 -23
  14. package/components/virtualization/GridMainContainer.js +1 -1
  15. package/hooks/features/columnHeaders/useGridColumnHeaders.js +10 -3
  16. package/hooks/features/columnResize/gridColumnResizeApi.d.ts +6 -0
  17. package/hooks/features/columnResize/gridColumnResizeApi.js +2 -1
  18. package/hooks/features/columnResize/useGridColumnResize.d.ts +1 -1
  19. package/hooks/features/columnResize/useGridColumnResize.js +9 -4
  20. package/hooks/features/columns/gridColumnsUtils.d.ts +1 -1
  21. package/hooks/features/columns/gridColumnsUtils.js +2 -1
  22. package/index.js +1 -1
  23. package/internals/utils/index.d.ts +0 -1
  24. package/internals/utils/index.js +0 -1
  25. package/locales/koKR.js +45 -49
  26. package/material/index.js +30 -4
  27. package/models/gridBaseSlots.d.ts +21 -0
  28. package/models/gridBaseSlots.js +1 -0
  29. package/models/gridSlotsComponentsProps.d.ts +25 -5
  30. package/models/props/DataGridProps.d.ts +0 -5
  31. package/modern/DataGrid/DataGrid.js +2 -6
  32. package/modern/DataGrid/useDataGridProps.js +3 -3
  33. package/modern/components/GridRow.js +12 -1
  34. package/modern/components/cell/GridActionsCellItem.js +4 -6
  35. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js +6 -11
  36. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js +6 -11
  37. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js +6 -11
  38. package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +13 -22
  39. package/modern/components/toolbar/GridToolbarDensitySelector.js +3 -5
  40. package/modern/components/toolbar/GridToolbarFilterButton.js +3 -0
  41. package/modern/components/toolbar/GridToolbarQuickFilter.js +27 -23
  42. package/modern/components/virtualization/GridMainContainer.js +1 -1
  43. package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js +10 -3
  44. package/modern/hooks/features/columnResize/gridColumnResizeApi.js +2 -1
  45. package/modern/hooks/features/columnResize/useGridColumnResize.js +9 -4
  46. package/modern/hooks/features/columns/gridColumnsUtils.js +2 -1
  47. package/modern/index.js +1 -1
  48. package/modern/internals/utils/index.js +0 -1
  49. package/modern/locales/koKR.js +45 -49
  50. package/modern/material/index.js +30 -4
  51. package/modern/models/gridBaseSlots.js +1 -0
  52. package/node/DataGrid/DataGrid.js +2 -6
  53. package/node/DataGrid/useDataGridProps.js +2 -2
  54. package/node/components/GridRow.js +12 -1
  55. package/node/components/cell/GridActionsCellItem.js +3 -5
  56. package/node/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js +5 -10
  57. package/node/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js +5 -10
  58. package/node/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js +5 -10
  59. package/node/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js +13 -22
  60. package/node/components/toolbar/GridToolbarDensitySelector.js +3 -5
  61. package/node/components/toolbar/GridToolbarFilterButton.js +3 -0
  62. package/node/components/toolbar/GridToolbarQuickFilter.js +27 -23
  63. package/node/components/virtualization/GridMainContainer.js +1 -1
  64. package/node/hooks/features/columnHeaders/useGridColumnHeaders.js +10 -3
  65. package/node/hooks/features/columnResize/gridColumnResizeApi.js +2 -1
  66. package/node/hooks/features/columnResize/useGridColumnResize.js +9 -4
  67. package/node/hooks/features/columns/gridColumnsUtils.js +2 -1
  68. package/node/index.js +1 -1
  69. package/node/internals/utils/index.js +0 -11
  70. package/node/locales/koKR.js +45 -49
  71. package/node/material/index.js +31 -4
  72. package/node/models/gridBaseSlots.js +5 -0
  73. package/package.json +2 -2
  74. package/internals/utils/useProps.d.ts +0 -1
  75. package/internals/utils/useProps.js +0 -24
  76. package/joy/icons.d.ts +0 -32
  77. package/joy/icons.js +0 -431
  78. package/joy/index.d.ts +0 -2
  79. package/joy/index.js +0 -2
  80. package/joy/joySlots.d.ts +0 -3
  81. package/joy/joySlots.js +0 -389
  82. package/joy/package.json +0 -6
  83. package/modern/internals/utils/useProps.js +0 -24
  84. package/modern/joy/icons.js +0 -431
  85. package/modern/joy/index.js +0 -2
  86. package/modern/joy/joySlots.js +0 -389
  87. package/node/internals/utils/useProps.js +0 -30
  88. package/node/joy/icons.js +0 -439
  89. package/node/joy/index.js +0 -13
  90. 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;