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