@mui/lab 6.0.0-alpha.2 → 6.0.0-alpha.3

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 (140) hide show
  1. package/CHANGELOG.md +73 -0
  2. package/index.js +1 -1
  3. package/modern/index.js +1 -1
  4. package/node/index.js +1 -1
  5. package/package.json +5 -5
  6. package/legacy/AdapterDateFns/AdapterDateFns.js +0 -18
  7. package/legacy/AdapterDateFns/index.js +0 -1
  8. package/legacy/AdapterDayjs/AdapterDayjs.js +0 -18
  9. package/legacy/AdapterDayjs/index.js +0 -1
  10. package/legacy/AdapterLuxon/AdapterLuxon.js +0 -18
  11. package/legacy/AdapterLuxon/index.js +0 -1
  12. package/legacy/AdapterMoment/AdapterMoment.js +0 -18
  13. package/legacy/AdapterMoment/index.js +0 -1
  14. package/legacy/Alert/Alert.js +0 -20
  15. package/legacy/Alert/index.js +0 -1
  16. package/legacy/AlertTitle/AlertTitle.js +0 -20
  17. package/legacy/AlertTitle/index.js +0 -1
  18. package/legacy/Autocomplete/Autocomplete.js +0 -20
  19. package/legacy/Autocomplete/index.js +0 -1
  20. package/legacy/AvatarGroup/AvatarGroup.js +0 -20
  21. package/legacy/AvatarGroup/index.js +0 -1
  22. package/legacy/CalendarPicker/CalendarPicker.js +0 -21
  23. package/legacy/CalendarPicker/index.js +0 -2
  24. package/legacy/CalendarPickerSkeleton/CalendarPickerSkeleton.js +0 -25
  25. package/legacy/CalendarPickerSkeleton/index.js +0 -2
  26. package/legacy/ClockPicker/ClockPicker.js +0 -21
  27. package/legacy/ClockPicker/index.js +0 -2
  28. package/legacy/DatePicker/DatePicker.js +0 -19
  29. package/legacy/DatePicker/index.js +0 -2
  30. package/legacy/DateRangePicker/DateRangePicker.js +0 -18
  31. package/legacy/DateRangePicker/index.js +0 -2
  32. package/legacy/DateRangePickerDay/DateRangePickerDay.js +0 -22
  33. package/legacy/DateRangePickerDay/index.js +0 -2
  34. package/legacy/DateTimePicker/DateTimePicker.js +0 -20
  35. package/legacy/DateTimePicker/index.js +0 -2
  36. package/legacy/DesktopDatePicker/DesktopDatePicker.js +0 -20
  37. package/legacy/DesktopDatePicker/index.js +0 -2
  38. package/legacy/DesktopDateRangePicker/DesktopDateRangePicker.js +0 -18
  39. package/legacy/DesktopDateRangePicker/index.js +0 -2
  40. package/legacy/DesktopDateTimePicker/DesktopDateTimePicker.js +0 -20
  41. package/legacy/DesktopDateTimePicker/index.js +0 -2
  42. package/legacy/DesktopTimePicker/DesktopTimePicker.js +0 -20
  43. package/legacy/DesktopTimePicker/index.js +0 -2
  44. package/legacy/LoadingButton/LoadingButton.js +0 -213
  45. package/legacy/LoadingButton/index.js +0 -3
  46. package/legacy/LoadingButton/loadingButtonClasses.js +0 -7
  47. package/legacy/LocalizationProvider/LocalizationProvider.js +0 -19
  48. package/legacy/LocalizationProvider/index.js +0 -2
  49. package/legacy/Masonry/Masonry.js +0 -339
  50. package/legacy/Masonry/index.js +0 -3
  51. package/legacy/Masonry/masonryClasses.js +0 -7
  52. package/legacy/MobileDatePicker/MobileDatePicker.js +0 -20
  53. package/legacy/MobileDatePicker/index.js +0 -2
  54. package/legacy/MobileDateRangePicker/MobileDateRangePicker.js +0 -18
  55. package/legacy/MobileDateRangePicker/index.js +0 -2
  56. package/legacy/MobileDateTimePicker/MobileDateTimePicker.js +0 -20
  57. package/legacy/MobileDateTimePicker/index.js +0 -2
  58. package/legacy/MobileTimePicker/MobileTimePicker.js +0 -20
  59. package/legacy/MobileTimePicker/index.js +0 -2
  60. package/legacy/MonthPicker/MonthPicker.js +0 -25
  61. package/legacy/MonthPicker/index.js +0 -2
  62. package/legacy/Pagination/Pagination.js +0 -20
  63. package/legacy/Pagination/index.js +0 -2
  64. package/legacy/Pagination/usePagination.js +0 -3
  65. package/legacy/PaginationItem/PaginationItem.js +0 -20
  66. package/legacy/PaginationItem/index.js +0 -1
  67. package/legacy/PickersDay/PickersDay.js +0 -25
  68. package/legacy/PickersDay/index.js +0 -2
  69. package/legacy/Rating/Rating.js +0 -20
  70. package/legacy/Rating/index.js +0 -1
  71. package/legacy/Skeleton/Skeleton.js +0 -20
  72. package/legacy/Skeleton/index.js +0 -1
  73. package/legacy/SpeedDial/SpeedDial.js +0 -20
  74. package/legacy/SpeedDial/index.js +0 -1
  75. package/legacy/SpeedDialAction/SpeedDialAction.js +0 -20
  76. package/legacy/SpeedDialAction/index.js +0 -1
  77. package/legacy/SpeedDialIcon/SpeedDialIcon.js +0 -20
  78. package/legacy/SpeedDialIcon/index.js +0 -1
  79. package/legacy/StaticDatePicker/StaticDatePicker.js +0 -20
  80. package/legacy/StaticDatePicker/index.js +0 -2
  81. package/legacy/StaticDateRangePicker/StaticDateRangePicker.js +0 -18
  82. package/legacy/StaticDateRangePicker/index.js +0 -2
  83. package/legacy/StaticDateTimePicker/StaticDateTimePicker.js +0 -20
  84. package/legacy/StaticDateTimePicker/index.js +0 -2
  85. package/legacy/StaticTimePicker/StaticTimePicker.js +0 -20
  86. package/legacy/StaticTimePicker/index.js +0 -2
  87. package/legacy/TabContext/TabContext.js +0 -72
  88. package/legacy/TabContext/index.js +0 -2
  89. package/legacy/TabList/TabList.js +0 -43
  90. package/legacy/TabList/index.js +0 -1
  91. package/legacy/TabPanel/TabPanel.js +0 -96
  92. package/legacy/TabPanel/index.js +0 -3
  93. package/legacy/TabPanel/tabPanelClasses.js +0 -7
  94. package/legacy/TimePicker/TimePicker.js +0 -20
  95. package/legacy/TimePicker/index.js +0 -2
  96. package/legacy/Timeline/Timeline.js +0 -113
  97. package/legacy/Timeline/Timeline.types.js +0 -1
  98. package/legacy/Timeline/TimelineContext.js +0 -10
  99. package/legacy/Timeline/index.js +0 -4
  100. package/legacy/Timeline/timelineClasses.js +0 -7
  101. package/legacy/TimelineConnector/TimelineConnector.js +0 -70
  102. package/legacy/TimelineConnector/index.js +0 -3
  103. package/legacy/TimelineConnector/timelineConnectorClasses.js +0 -7
  104. package/legacy/TimelineContent/TimelineContent.js +0 -82
  105. package/legacy/TimelineContent/index.js +0 -3
  106. package/legacy/TimelineContent/timelineContentClasses.js +0 -7
  107. package/legacy/TimelineDot/TimelineDot.js +0 -112
  108. package/legacy/TimelineDot/index.js +0 -3
  109. package/legacy/TimelineDot/timelineDotClasses.js +0 -7
  110. package/legacy/TimelineItem/TimelineItem.js +0 -118
  111. package/legacy/TimelineItem/index.js +0 -3
  112. package/legacy/TimelineItem/timelineItemClasses.js +0 -7
  113. package/legacy/TimelineOppositeContent/TimelineOppositeContent.js +0 -84
  114. package/legacy/TimelineOppositeContent/index.js +0 -3
  115. package/legacy/TimelineOppositeContent/timelineOppositeContentClasses.js +0 -7
  116. package/legacy/TimelineSeparator/TimelineSeparator.js +0 -68
  117. package/legacy/TimelineSeparator/index.js +0 -3
  118. package/legacy/TimelineSeparator/timelineSeparatorClasses.js +0 -7
  119. package/legacy/ToggleButton/ToggleButton.js +0 -20
  120. package/legacy/ToggleButton/index.js +0 -1
  121. package/legacy/ToggleButtonGroup/ToggleButtonGroup.js +0 -20
  122. package/legacy/ToggleButtonGroup/index.js +0 -1
  123. package/legacy/TreeItem/TreeItem.js +0 -19
  124. package/legacy/TreeItem/index.js +0 -2
  125. package/legacy/TreeView/TreeView.js +0 -20
  126. package/legacy/TreeView/index.js +0 -2
  127. package/legacy/YearPicker/YearPicker.js +0 -24
  128. package/legacy/YearPicker/index.js +0 -2
  129. package/legacy/index.js +0 -113
  130. package/legacy/internal/convertTimelinePositionToClass.js +0 -4
  131. package/legacy/internal/svg-icons/ArrowDropDown.js +0 -12
  132. package/legacy/internal/svg-icons/ArrowLeft.js +0 -12
  133. package/legacy/internal/svg-icons/ArrowRight.js +0 -12
  134. package/legacy/internal/svg-icons/Calendar.js +0 -12
  135. package/legacy/internal/svg-icons/Clock.js +0 -16
  136. package/legacy/internal/svg-icons/DateRange.js +0 -12
  137. package/legacy/internal/svg-icons/Pen.js +0 -12
  138. package/legacy/internal/svg-icons/Time.js +0 -16
  139. package/legacy/themeAugmentation/index.js +0 -1
  140. package/legacy/useAutocomplete/index.js +0 -1
@@ -1,213 +0,0 @@
1
- 'use client';
2
-
3
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
5
- import _extends from "@babel/runtime/helpers/esm/extends";
6
- import * as React from 'react';
7
- import PropTypes from 'prop-types';
8
- import { chainPropTypes } from '@mui/utils';
9
- import { capitalize, unstable_useId as useId } from '@mui/material/utils';
10
- import { unstable_composeClasses as composeClasses } from '@mui/base';
11
- import { styled, useThemeProps } from '@mui/material/styles';
12
- import Button from '@mui/material/Button';
13
- import { ButtonGroupContext } from '@mui/material/ButtonGroup';
14
- import CircularProgress from '@mui/material/CircularProgress';
15
- import resolveProps from '@mui/utils/resolveProps';
16
- import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';
17
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
18
- var useUtilityClasses = function useUtilityClasses(ownerState) {
19
- var loading = ownerState.loading,
20
- loadingPosition = ownerState.loadingPosition,
21
- classes = ownerState.classes;
22
- var slots = {
23
- root: ['root', loading && 'loading'],
24
- startIcon: [loading && "startIconLoading".concat(capitalize(loadingPosition))],
25
- endIcon: [loading && "endIconLoading".concat(capitalize(loadingPosition))],
26
- loadingIndicator: ['loadingIndicator', loading && "loadingIndicator".concat(capitalize(loadingPosition))]
27
- };
28
- var composedClasses = composeClasses(slots, getLoadingButtonUtilityClass, classes);
29
- return _extends({}, classes, composedClasses);
30
- };
31
-
32
- // TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
33
- var rootShouldForwardProp = function rootShouldForwardProp(prop) {
34
- return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
35
- };
36
- var LoadingButtonRoot = styled(Button, {
37
- shouldForwardProp: function shouldForwardProp(prop) {
38
- return rootShouldForwardProp(prop) || prop === 'classes';
39
- },
40
- name: 'MuiLoadingButton',
41
- slot: 'Root',
42
- overridesResolver: function overridesResolver(props, styles) {
43
- return [styles.root, styles.startIconLoadingStart && _defineProperty({}, "& .".concat(loadingButtonClasses.startIconLoadingStart), styles.startIconLoadingStart), styles.endIconLoadingEnd && _defineProperty({}, "& .".concat(loadingButtonClasses.endIconLoadingEnd), styles.endIconLoadingEnd)];
44
- }
45
- })(function (_ref3) {
46
- var ownerState = _ref3.ownerState,
47
- theme = _ref3.theme;
48
- return _extends(_defineProperty({}, "& .".concat(loadingButtonClasses.startIconLoadingStart, ", & .").concat(loadingButtonClasses.endIconLoadingEnd), {
49
- transition: theme.transitions.create(['opacity'], {
50
- duration: theme.transitions.duration.short
51
- }),
52
- opacity: 0
53
- }), ownerState.loadingPosition === 'center' && _defineProperty({
54
- transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
55
- duration: theme.transitions.duration.short
56
- })
57
- }, "&.".concat(loadingButtonClasses.loading), {
58
- color: 'transparent'
59
- }), ownerState.loadingPosition === 'start' && ownerState.fullWidth && _defineProperty({}, "& .".concat(loadingButtonClasses.startIconLoadingStart, ", & .").concat(loadingButtonClasses.endIconLoadingEnd), {
60
- transition: theme.transitions.create(['opacity'], {
61
- duration: theme.transitions.duration.short
62
- }),
63
- opacity: 0,
64
- marginRight: -8
65
- }), ownerState.loadingPosition === 'end' && ownerState.fullWidth && _defineProperty({}, "& .".concat(loadingButtonClasses.startIconLoadingStart, ", & .").concat(loadingButtonClasses.endIconLoadingEnd), {
66
- transition: theme.transitions.create(['opacity'], {
67
- duration: theme.transitions.duration.short
68
- }),
69
- opacity: 0,
70
- marginLeft: -8
71
- }));
72
- });
73
- var LoadingButtonLoadingIndicator = styled('span', {
74
- name: 'MuiLoadingButton',
75
- slot: 'LoadingIndicator',
76
- overridesResolver: function overridesResolver(props, styles) {
77
- var ownerState = props.ownerState;
78
- return [styles.loadingIndicator, styles["loadingIndicator".concat(capitalize(ownerState.loadingPosition))]];
79
- }
80
- })(function (_ref7) {
81
- var theme = _ref7.theme,
82
- ownerState = _ref7.ownerState;
83
- return _extends({
84
- position: 'absolute',
85
- visibility: 'visible',
86
- display: 'flex'
87
- }, ownerState.loadingPosition === 'start' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
88
- left: ownerState.size === 'small' ? 10 : 14
89
- }, ownerState.loadingPosition === 'start' && ownerState.variant === 'text' && {
90
- left: 6
91
- }, ownerState.loadingPosition === 'center' && {
92
- left: '50%',
93
- transform: 'translate(-50%)',
94
- color: (theme.vars || theme).palette.action.disabled
95
- }, ownerState.loadingPosition === 'end' && (ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
96
- right: ownerState.size === 'small' ? 10 : 14
97
- }, ownerState.loadingPosition === 'end' && ownerState.variant === 'text' && {
98
- right: 6
99
- }, ownerState.loadingPosition === 'start' && ownerState.fullWidth && {
100
- position: 'relative',
101
- left: -10
102
- }, ownerState.loadingPosition === 'end' && ownerState.fullWidth && {
103
- position: 'relative',
104
- right: -10
105
- });
106
- });
107
- var LoadingButton = /*#__PURE__*/React.forwardRef(function LoadingButton(inProps, ref) {
108
- var contextProps = React.useContext(ButtonGroupContext);
109
- var resolvedProps = resolveProps(contextProps, inProps);
110
- var props = useThemeProps({
111
- props: resolvedProps,
112
- name: 'MuiLoadingButton'
113
- });
114
- var children = props.children,
115
- _props$disabled = props.disabled,
116
- disabled = _props$disabled === void 0 ? false : _props$disabled,
117
- idProp = props.id,
118
- _props$loading = props.loading,
119
- loading = _props$loading === void 0 ? false : _props$loading,
120
- loadingIndicatorProp = props.loadingIndicator,
121
- _props$loadingPositio = props.loadingPosition,
122
- loadingPosition = _props$loadingPositio === void 0 ? 'center' : _props$loadingPositio,
123
- _props$variant = props.variant,
124
- variant = _props$variant === void 0 ? 'text' : _props$variant,
125
- other = _objectWithoutProperties(props, ["children", "disabled", "id", "loading", "loadingIndicator", "loadingPosition", "variant"]);
126
- var id = useId(idProp);
127
- var loadingIndicator = loadingIndicatorProp != null ? loadingIndicatorProp : /*#__PURE__*/_jsx(CircularProgress, {
128
- "aria-labelledby": id,
129
- color: "inherit",
130
- size: 16
131
- });
132
- var ownerState = _extends({}, props, {
133
- disabled: disabled,
134
- loading: loading,
135
- loadingIndicator: loadingIndicator,
136
- loadingPosition: loadingPosition,
137
- variant: variant
138
- });
139
- var classes = useUtilityClasses(ownerState);
140
- var loadingButtonLoadingIndicator = loading ? /*#__PURE__*/_jsx(LoadingButtonLoadingIndicator, {
141
- className: classes.loadingIndicator,
142
- ownerState: ownerState,
143
- children: loadingIndicator
144
- }) : null;
145
- return /*#__PURE__*/_jsxs(LoadingButtonRoot, _extends({
146
- disabled: disabled || loading,
147
- id: id,
148
- ref: ref
149
- }, other, {
150
- variant: variant,
151
- classes: classes,
152
- ownerState: ownerState,
153
- children: [ownerState.loadingPosition === 'end' ? children : loadingButtonLoadingIndicator, ownerState.loadingPosition === 'end' ? loadingButtonLoadingIndicator : children]
154
- }));
155
- });
156
- process.env.NODE_ENV !== "production" ? LoadingButton.propTypes /* remove-proptypes */ = {
157
- // ┌────────────────────────────── Warning ──────────────────────────────┐
158
- // │ These PropTypes are generated from the TypeScript type definitions. │
159
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
160
- // └─────────────────────────────────────────────────────────────────────┘
161
- /**
162
- * The content of the component.
163
- */
164
- children: PropTypes.node,
165
- /**
166
- * Override or extend the styles applied to the component.
167
- */
168
- classes: PropTypes.object,
169
- /**
170
- * If `true`, the component is disabled.
171
- * @default false
172
- */
173
- disabled: PropTypes.bool,
174
- /**
175
- * @ignore
176
- */
177
- id: PropTypes.string,
178
- /**
179
- * If `true`, the loading indicator is shown and the button becomes disabled.
180
- * @default false
181
- */
182
- loading: PropTypes.bool,
183
- /**
184
- * Element placed before the children if the button is in loading state.
185
- * The node should contain an element with `role="progressbar"` with an accessible name.
186
- * By default we render a `CircularProgress` that is labelled by the button itself.
187
- * @default <CircularProgress color="inherit" size={16} />
188
- */
189
- loadingIndicator: PropTypes.node,
190
- /**
191
- * The loading indicator can be positioned on the start, end, or the center of the button.
192
- * @default 'center'
193
- */
194
- loadingPosition: chainPropTypes(PropTypes.oneOf(['start', 'end', 'center']), function (props) {
195
- if (props.loadingPosition === 'start' && !props.startIcon) {
196
- return new Error("MUI: The loadingPosition=\"start\" should be used in combination with startIcon.");
197
- }
198
- if (props.loadingPosition === 'end' && !props.endIcon) {
199
- return new Error("MUI: The loadingPosition=\"end\" should be used in combination with endIcon.");
200
- }
201
- return null;
202
- }),
203
- /**
204
- * The system prop that allows defining system overrides as well as additional CSS styles.
205
- */
206
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
207
- /**
208
- * The variant to use.
209
- * @default 'text'
210
- */
211
- variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['contained', 'outlined', 'text']), PropTypes.string])
212
- } : void 0;
213
- export default LoadingButton;
@@ -1,3 +0,0 @@
1
- export { default } from './LoadingButton';
2
- export { default as loadingButtonClasses } from './loadingButtonClasses';
3
- export * from './loadingButtonClasses';
@@ -1,7 +0,0 @@
1
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
2
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
3
- export function getLoadingButtonUtilityClass(slot) {
4
- return generateUtilityClass('MuiLoadingButton', slot);
5
- }
6
- var loadingButtonClasses = generateUtilityClasses('MuiLoadingButton', ['root', 'loading', 'loadingIndicator', 'loadingIndicatorCenter', 'loadingIndicatorStart', 'loadingIndicatorEnd', 'endIconLoadingEnd', 'startIconLoadingStart']);
7
- export default loadingButtonClasses;
@@ -1,19 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- var warnedOnce = false;
5
- var warn = function warn() {
6
- if (!warnedOnce) {
7
- console.warn(['MUI: The LocalizationProvider component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { LocalizationProvider } from '@mui/x-date-pickers'`", "or `import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
8
- warnedOnce = true;
9
- }
10
- };
11
- /**
12
- * @deprecated The LocalizationProvider component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
13
- * @ignore - do not document.
14
- */
15
- var LocalizationProvider = /*#__PURE__*/React.forwardRef(function DeprecatedLocalizationProvider() {
16
- warn();
17
- return null;
18
- });
19
- export default LocalizationProvider;
@@ -1,2 +0,0 @@
1
- export { default } from './LocalizationProvider';
2
- export * from './LocalizationProvider';
@@ -1,339 +0,0 @@
1
- 'use client';
2
-
3
- import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
4
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- import _typeof from "@babel/runtime/helpers/esm/typeof";
6
- import _extends from "@babel/runtime/helpers/esm/extends";
7
- import { unstable_composeClasses as composeClasses } from '@mui/base';
8
- import * as ReactDOM from 'react-dom';
9
- import { styled, useThemeProps } from '@mui/material/styles';
10
- import { createUnarySpacing, getValue, handleBreakpoints, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
11
- import { deepmerge, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
12
- import clsx from 'clsx';
13
- import PropTypes from 'prop-types';
14
- import * as React from 'react';
15
- import { getMasonryUtilityClass } from './masonryClasses';
16
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
17
- export var parseToNumber = function parseToNumber(val) {
18
- return Number(val.replace('px', ''));
19
- };
20
- var lineBreakStyle = {
21
- flexBasis: '100%',
22
- width: 0,
23
- margin: 0,
24
- padding: 0
25
- };
26
- var useUtilityClasses = function useUtilityClasses(ownerState) {
27
- var classes = ownerState.classes;
28
- var slots = {
29
- root: ['root']
30
- };
31
- return composeClasses(slots, getMasonryUtilityClass, classes);
32
- };
33
- export var getStyle = function getStyle(_ref) {
34
- var ownerState = _ref.ownerState,
35
- theme = _ref.theme;
36
- var styles = {
37
- width: '100%',
38
- display: 'flex',
39
- flexFlow: 'column wrap',
40
- alignContent: 'flex-start',
41
- boxSizing: 'border-box',
42
- '& > *': {
43
- boxSizing: 'border-box'
44
- }
45
- };
46
- var stylesSSR = {};
47
- // Only applicable for Server-Side Rendering
48
- if (ownerState.isSSR) {
49
- var orderStyleSSR = {};
50
- var defaultSpacing = parseToNumber(theme.spacing(ownerState.defaultSpacing));
51
- for (var i = 1; i <= ownerState.defaultColumns; i += 1) {
52
- orderStyleSSR["&:nth-of-type(".concat(ownerState.defaultColumns, "n+").concat(i % ownerState.defaultColumns, ")")] = {
53
- order: i
54
- };
55
- }
56
- stylesSSR.height = ownerState.defaultHeight;
57
- stylesSSR.margin = -(defaultSpacing / 2);
58
- stylesSSR['& > *'] = _extends({}, styles['& > *'], orderStyleSSR, {
59
- margin: defaultSpacing / 2,
60
- width: "calc(".concat((100 / ownerState.defaultColumns).toFixed(2), "% - ").concat(defaultSpacing, "px)")
61
- });
62
- return _extends({}, styles, stylesSSR);
63
- }
64
- var spacingValues = resolveBreakpointValues({
65
- values: ownerState.spacing,
66
- breakpoints: theme.breakpoints.values
67
- });
68
- var transformer = createUnarySpacing(theme);
69
- var spacingStyleFromPropValue = function spacingStyleFromPropValue(propValue) {
70
- var spacing;
71
- // in case of string/number value
72
- if (typeof propValue === 'string' && !Number.isNaN(Number(propValue)) || typeof propValue === 'number') {
73
- var themeSpacingValue = Number(propValue);
74
- spacing = getValue(transformer, themeSpacingValue);
75
- } else {
76
- spacing = propValue;
77
- }
78
- return _extends({
79
- margin: "calc(0px - (".concat(spacing, " / 2))"),
80
- '& > *': {
81
- margin: "calc(".concat(spacing, " / 2)")
82
- }
83
- }, ownerState.maxColumnHeight && {
84
- height: typeof spacing === 'number' ? Math.ceil(ownerState.maxColumnHeight + parseToNumber(spacing)) : "calc(".concat(ownerState.maxColumnHeight, "px + ").concat(spacing, ")")
85
- });
86
- };
87
- styles = deepmerge(styles, handleBreakpoints({
88
- theme: theme
89
- }, spacingValues, spacingStyleFromPropValue));
90
- var columnValues = resolveBreakpointValues({
91
- values: ownerState.columns,
92
- breakpoints: theme.breakpoints.values
93
- });
94
- var columnStyleFromPropValue = function columnStyleFromPropValue(propValue) {
95
- var columnValue = Number(propValue);
96
- var width = "".concat((100 / columnValue).toFixed(2), "%");
97
- var spacing = typeof spacingValues === 'string' && !Number.isNaN(Number(spacingValues)) || typeof spacingValues === 'number' ? getValue(transformer, Number(spacingValues)) : '0px';
98
- return {
99
- '& > *': {
100
- width: "calc(".concat(width, " - ").concat(spacing, ")")
101
- }
102
- };
103
- };
104
- styles = deepmerge(styles, handleBreakpoints({
105
- theme: theme
106
- }, columnValues, columnStyleFromPropValue));
107
-
108
- // configure width for responsive spacing values
109
- if (_typeof(spacingValues) === 'object') {
110
- styles = deepmerge(styles, handleBreakpoints({
111
- theme: theme
112
- }, spacingValues, function (propValue, breakpoint) {
113
- if (breakpoint) {
114
- var themeSpacingValue = Number(propValue);
115
- var lastBreakpoint = Object.keys(columnValues).pop();
116
- var spacing = getValue(transformer, themeSpacingValue);
117
- var column = _typeof(columnValues) === 'object' ? columnValues[breakpoint] || columnValues[lastBreakpoint] : columnValues;
118
- var width = "".concat((100 / column).toFixed(2), "%");
119
- return {
120
- '& > *': {
121
- width: "calc(".concat(width, " - ").concat(spacing, ")")
122
- }
123
- };
124
- }
125
- return null;
126
- }));
127
- }
128
- return styles;
129
- };
130
- var MasonryRoot = styled('div', {
131
- name: 'MuiMasonry',
132
- slot: 'Root',
133
- overridesResolver: function overridesResolver(props, styles) {
134
- return [styles.root];
135
- }
136
- })(getStyle);
137
- var Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
138
- var props = useThemeProps({
139
- props: inProps,
140
- name: 'MuiMasonry'
141
- });
142
- var children = props.children,
143
- className = props.className,
144
- _props$component = props.component,
145
- component = _props$component === void 0 ? 'div' : _props$component,
146
- _props$columns = props.columns,
147
- columns = _props$columns === void 0 ? 4 : _props$columns,
148
- _props$spacing = props.spacing,
149
- spacing = _props$spacing === void 0 ? 1 : _props$spacing,
150
- _props$sequential = props.sequential,
151
- sequential = _props$sequential === void 0 ? false : _props$sequential,
152
- defaultColumns = props.defaultColumns,
153
- defaultHeight = props.defaultHeight,
154
- defaultSpacing = props.defaultSpacing,
155
- other = _objectWithoutProperties(props, ["children", "className", "component", "columns", "spacing", "sequential", "defaultColumns", "defaultHeight", "defaultSpacing"]);
156
- var masonryRef = React.useRef();
157
- var _React$useState = React.useState(),
158
- maxColumnHeight = _React$useState[0],
159
- setMaxColumnHeight = _React$useState[1];
160
- var isSSR = !maxColumnHeight && defaultHeight && defaultColumns !== undefined && defaultSpacing !== undefined;
161
- var _React$useState2 = React.useState(isSSR ? defaultColumns - 1 : 0),
162
- numberOfLineBreaks = _React$useState2[0],
163
- setNumberOfLineBreaks = _React$useState2[1];
164
- var ownerState = _extends({}, props, {
165
- spacing: spacing,
166
- columns: columns,
167
- maxColumnHeight: maxColumnHeight,
168
- defaultColumns: defaultColumns,
169
- defaultHeight: defaultHeight,
170
- defaultSpacing: defaultSpacing,
171
- isSSR: isSSR
172
- });
173
- var classes = useUtilityClasses(ownerState);
174
- var handleResize = React.useCallback(function (masonryChildren) {
175
- if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
176
- return;
177
- }
178
- var masonry = masonryRef.current;
179
- var masonryFirstChild = masonryRef.current.firstChild;
180
- var parentWidth = masonry.clientWidth;
181
- var firstChildWidth = masonryFirstChild.clientWidth;
182
- if (parentWidth === 0 || firstChildWidth === 0) {
183
- return;
184
- }
185
- var firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
186
- var firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
187
- var firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
188
- var currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));
189
- var columnHeights = new Array(currentNumberOfColumns).fill(0);
190
- var skip = false;
191
- var nextOrder = 1;
192
- masonry.childNodes.forEach(function (child) {
193
- if (child.nodeType !== Node.ELEMENT_NODE || child.dataset.class === 'line-break' || skip) {
194
- return;
195
- }
196
- var childComputedStyle = window.getComputedStyle(child);
197
- var childMarginTop = parseToNumber(childComputedStyle.marginTop);
198
- var childMarginBottom = parseToNumber(childComputedStyle.marginBottom);
199
- // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
200
- var childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
201
- if (childHeight === 0) {
202
- skip = true;
203
- return;
204
- }
205
- // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
206
- for (var i = 0; i < child.childNodes.length; i += 1) {
207
- var nestedChild = child.childNodes[i];
208
- if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
209
- skip = true;
210
- break;
211
- }
212
- }
213
- if (!skip) {
214
- if (sequential) {
215
- columnHeights[nextOrder - 1] += childHeight;
216
- child.style.order = nextOrder;
217
- nextOrder += 1;
218
- if (nextOrder > currentNumberOfColumns) {
219
- nextOrder = 1;
220
- }
221
- } else {
222
- // find the current shortest column (where the current item will be placed)
223
- var currentMinColumnIndex = columnHeights.indexOf(Math.min.apply(Math, _toConsumableArray(columnHeights)));
224
- columnHeights[currentMinColumnIndex] += childHeight;
225
- var order = currentMinColumnIndex + 1;
226
- child.style.order = order;
227
- }
228
- }
229
- });
230
- if (!skip) {
231
- // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
232
- // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
233
- // Related issue - https://github.com/facebook/react/issues/24331
234
- ReactDOM.flushSync(function () {
235
- setMaxColumnHeight(Math.max.apply(Math, _toConsumableArray(columnHeights)));
236
- setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
237
- });
238
- }
239
- }, [sequential]);
240
- useEnhancedEffect(function () {
241
- // IE and old browsers are not supported
242
- if (typeof ResizeObserver === 'undefined') {
243
- return undefined;
244
- }
245
- var animationFrame;
246
- var resizeObserver = new ResizeObserver(function () {
247
- // see https://github.com/mui/material-ui/issues/36909
248
- animationFrame = requestAnimationFrame(handleResize);
249
- });
250
- if (masonryRef.current) {
251
- masonryRef.current.childNodes.forEach(function (childNode) {
252
- resizeObserver.observe(childNode);
253
- });
254
- }
255
- return function () {
256
- if (animationFrame) {
257
- window.cancelAnimationFrame(animationFrame);
258
- }
259
- if (resizeObserver) {
260
- resizeObserver.disconnect();
261
- }
262
- };
263
- }, [columns, spacing, children, handleResize]);
264
- var handleRef = useForkRef(ref, masonryRef);
265
-
266
- // columns are likely to have different heights and hence can start to merge;
267
- // a line break at the end of each column prevents columns from merging
268
- var lineBreaks = new Array(numberOfLineBreaks).fill('').map(function (_, index) {
269
- return /*#__PURE__*/_jsx("span", {
270
- "data-class": "line-break",
271
- style: _extends({}, lineBreakStyle, {
272
- order: index + 1
273
- })
274
- }, index);
275
- });
276
- return /*#__PURE__*/_jsxs(MasonryRoot, _extends({
277
- as: component,
278
- className: clsx(classes.root, className),
279
- ref: handleRef,
280
- ownerState: ownerState
281
- }, other, {
282
- children: [children, lineBreaks]
283
- }));
284
- });
285
- process.env.NODE_ENV !== "production" ? Masonry.propTypes /* remove-proptypes */ = {
286
- // ┌────────────────────────────── Warning ──────────────────────────────┐
287
- // │ These PropTypes are generated from the TypeScript type definitions. │
288
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
289
- // └─────────────────────────────────────────────────────────────────────┘
290
- /**
291
- * The content of the component.
292
- */
293
- children: PropTypes /* @typescript-to-proptypes-ignore */.node.isRequired,
294
- /**
295
- * Override or extend the styles applied to the component.
296
- */
297
- classes: PropTypes.object,
298
- /**
299
- * @ignore
300
- */
301
- className: PropTypes.string,
302
- /**
303
- * Number of columns.
304
- * @default 4
305
- */
306
- columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
307
- /**
308
- * The component used for the root node.
309
- * Either a string to use a HTML element or a component.
310
- */
311
- component: PropTypes.elementType,
312
- /**
313
- * The default number of columns of the component. This is provided for server-side rendering.
314
- */
315
- defaultColumns: PropTypes.number,
316
- /**
317
- * The default height of the component in px. This is provided for server-side rendering.
318
- */
319
- defaultHeight: PropTypes.number,
320
- /**
321
- * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
322
- */
323
- defaultSpacing: PropTypes.number,
324
- /**
325
- * Allows using sequential order rather than adding to shortest column
326
- * @default false
327
- */
328
- sequential: PropTypes.bool,
329
- /**
330
- * Defines the space between children. It is a factor of the theme's spacing.
331
- * @default 1
332
- */
333
- spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
334
- /**
335
- * Allows defining system overrides as well as additional CSS styles.
336
- */
337
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
338
- } : void 0;
339
- export default Masonry;
@@ -1,3 +0,0 @@
1
- export { default } from './Masonry';
2
- export * from './masonryClasses';
3
- export { default as masonryClasses } from './masonryClasses';
@@ -1,7 +0,0 @@
1
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
2
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
3
- export function getMasonryUtilityClass(slot) {
4
- return generateUtilityClass('MuiMasonry', slot);
5
- }
6
- var masonryClasses = generateUtilityClasses('MuiMasonry', ['root']);
7
- export default masonryClasses;
@@ -1,20 +0,0 @@
1
- 'use client';
2
-
3
- /* eslint-disable @typescript-eslint/no-unused-vars */
4
- import * as React from 'react';
5
- var warnedOnce = false;
6
- var warn = function warn() {
7
- if (!warnedOnce) {
8
- console.warn(['MUI: The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.', '', "You should use `import { MobileDatePicker } from '@mui/x-date-pickers'`", "or `import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
9
- warnedOnce = true;
10
- }
11
- };
12
- /**
13
- * @deprecated The MobileDatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
14
- * @ignore - do not document.
15
- */
16
- var MobileDatePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileDatePicker(props, ref) {
17
- warn();
18
- return null;
19
- });
20
- export default MobileDatePicker;
@@ -1,2 +0,0 @@
1
- export { default } from './MobileDatePicker';
2
- export * from './MobileDatePicker';
@@ -1,18 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-vars */
2
- import * as React from 'react';
3
- var warnedOnce = false;
4
- var warn = function warn() {
5
- if (!warnedOnce) {
6
- console.warn(['MUI: The MobileDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`', '', "You should use `import { MobileDateRangePicker } from '@mui/x-date-pickers-pro'`", "or `import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'`", '', 'More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.'].join('\n'));
7
- warnedOnce = true;
8
- }
9
- };
10
- /**
11
- * @deprecated The MobileDateRangePicker component was moved from `@mui/lab` to `@mui/x-date-pickers-pro`. More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.
12
- * @ignore - do not document.
13
- */
14
- var MobileDateRangePicker = /*#__PURE__*/React.forwardRef(function DeprecatedMobileDateRangePicker() {
15
- warn();
16
- return null;
17
- });
18
- export default MobileDateRangePicker;
@@ -1,2 +0,0 @@
1
- export { default } from './MobileDateRangePicker';
2
- export * from './MobileDateRangePicker';