@mui/material 6.4.1 → 6.4.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 (45) hide show
  1. package/AppBar/AppBar.d.ts +1 -1
  2. package/CHANGELOG.md +46 -0
  3. package/Card/Card.d.ts +1 -1
  4. package/CircularProgress/CircularProgress.d.ts +5 -1
  5. package/LinearProgress/LinearProgress.d.ts +5 -1
  6. package/OverridableComponent/index.d.ts +41 -0
  7. package/OverridableComponent/index.js +1 -0
  8. package/OverridableComponent/package.json +6 -0
  9. package/PaginationItem/PaginationItem.d.ts +1 -1
  10. package/Slider/useSlider.js +2 -2
  11. package/TextareaAutosize/TextareaAutosize.js +50 -40
  12. package/index.js +1 -1
  13. package/modern/OverridableComponent/index.js +1 -0
  14. package/modern/Slider/useSlider.js +2 -2
  15. package/modern/TextareaAutosize/TextareaAutosize.js +50 -40
  16. package/modern/index.js +1 -1
  17. package/modern/styles/components.js +1 -0
  18. package/modern/styles/overrides.js +1 -0
  19. package/modern/styles/props.js +1 -0
  20. package/modern/styles/variants.js +1 -0
  21. package/modern/useAutocomplete/useAutocomplete.js +13 -10
  22. package/modern/version/index.js +2 -2
  23. package/node/OverridableComponent/index.js +5 -0
  24. package/node/Slider/useSlider.js +2 -2
  25. package/node/TextareaAutosize/TextareaAutosize.js +50 -40
  26. package/node/index.js +1 -1
  27. package/node/styles/components.js +5 -0
  28. package/node/styles/overrides.js +5 -0
  29. package/node/styles/props.js +5 -0
  30. package/node/styles/variants.js +5 -0
  31. package/node/useAutocomplete/useAutocomplete.js +13 -10
  32. package/node/version/index.js +2 -2
  33. package/package.json +5 -5
  34. package/styles/components.d.ts +590 -591
  35. package/styles/components.js +1 -0
  36. package/styles/createThemeNoVars.d.ts +1 -1
  37. package/styles/overrides.d.ts +123 -142
  38. package/styles/overrides.js +1 -0
  39. package/styles/props.d.ts +120 -122
  40. package/styles/props.js +1 -0
  41. package/styles/variants.d.ts +7 -10
  42. package/styles/variants.js +1 -0
  43. package/useAutocomplete/useAutocomplete.js +13 -10
  44. package/version/index.js +2 -2
  45. package/OverridableComponent.d.ts +0 -67
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { OverridableStringUnion } from '@mui/types';
4
- import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
4
+ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
5
5
  import { PropTypes, Theme } from '..';
6
6
  import { AppBarClasses } from './appBarClasses';
7
7
  import { ExtendPaperTypeMap } from '../Paper/Paper';
package/CHANGELOG.md CHANGED
@@ -1,5 +1,51 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 6.4.3
4
+
5
+ <!-- generated comparing v6.4.2..v6.x -->
6
+
7
+ _Feb 4, 2025_
8
+
9
+ A big thanks to the 3 contributors who made this release possible.
10
+
11
+ ### `@mui/material@6.4.3`
12
+
13
+ - [LinearProgress][CircularProgress] Add variant overrides for module augmentation (#45191) @ZeeshanTamboli
14
+ - [TextField] Remove deprecated props from documentation (#45200) @sai6855
15
+
16
+ ### Core
17
+
18
+ - Fix corepack and pnpm installation in CircleCI (#45194) @DiegoAndai
19
+
20
+ All contributors of this release in alphabetical order: @DiegoAndai, @sai6855, @ZeeshanTamboli
21
+
22
+ ## 6.4.2
23
+
24
+ <!-- generated comparing v6.4.1..v6.x -->
25
+
26
+ _Jan 29, 2025_
27
+
28
+ A big thanks to the 5 contributors who made this release possible.
29
+
30
+ ### `@mui/material@6.4.2`
31
+
32
+ - [Autocomplete] Prevent shrink animation in uncontrolled Autocomplete when default value is set (#44873) @ZeeshanTamboli
33
+ - [Slider] Fix arrow keys past the end for Slider with custom marks (#45050) @joshkel
34
+ - [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) @mj12albert
35
+
36
+ ### Core
37
+
38
+ - [code-infra] a few fixes uncovered during ESM updates (@Janpot) (#45100) @Janpot
39
+ - [code-infra] Remove rsc-builder (#45079) @Janpot
40
+ - [code-infra] Remove commonjs imports in docs (#44976) @Janpot
41
+ - Prepare stable release from the `v6.x` branch (#45133) @DiegoAndai
42
+
43
+ ### Docs
44
+
45
+ - Fix `/base-ui` redirect and prune links (#45083) @mj12albert
46
+
47
+ All contributors of this release in alphabetical order: @DiegoAndai, @Janpot, @joshkel, @mj12albert, @ZeeshanTamboli
48
+
3
49
  ## 6.4.1
4
50
 
5
51
  <!-- generated comparing v6.4.0..master -->
package/Card/Card.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { DistributiveOmit } from '@mui/types';
4
- import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
4
+ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
5
5
  import { Theme } from '..';
6
6
  import { PaperOwnProps } from '../Paper';
7
7
  import { CardClasses } from './cardClasses';
@@ -5,6 +5,7 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
5
5
  import { CircularProgressClasses } from './circularProgressClasses';
6
6
 
7
7
  export interface CircularProgressPropsColorOverrides {}
8
+ export interface CircularProgressPropsVariantOverrides {}
8
9
 
9
10
  export interface CircularProgressProps
10
11
  extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -55,7 +56,10 @@ export interface CircularProgressProps
55
56
  * Use indeterminate when there is no progress value.
56
57
  * @default 'indeterminate'
57
58
  */
58
- variant?: 'determinate' | 'indeterminate';
59
+ variant?: OverridableStringUnion<
60
+ 'determinate' | 'indeterminate',
61
+ CircularProgressPropsVariantOverrides
62
+ >;
59
63
  }
60
64
 
61
65
  /**
@@ -5,6 +5,7 @@ import { InternalStandardProps as StandardProps, Theme } from '..';
5
5
  import { LinearProgressClasses } from './linearProgressClasses';
6
6
 
7
7
  export interface LinearProgressPropsColorOverrides {}
8
+ export interface LinearProgressPropsVariantOverrides {}
8
9
 
9
10
  export interface LinearProgressProps
10
11
  extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
@@ -41,7 +42,10 @@ export interface LinearProgressProps
41
42
  * Use indeterminate or query when there is no progress value.
42
43
  * @default 'indeterminate'
43
44
  */
44
- variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
45
+ variant?: OverridableStringUnion<
46
+ 'determinate' | 'indeterminate' | 'buffer' | 'query',
47
+ LinearProgressPropsVariantOverrides
48
+ >;
45
49
  }
46
50
 
47
51
  /**
@@ -0,0 +1,41 @@
1
+ import * as React from 'react';
2
+ import { DistributiveOmit } from '@mui/types';
3
+ import { StyledComponentProps } from '../styles';
4
+ /**
5
+ * A component whose root component can be controlled via a `component` prop.
6
+ *
7
+ * Adjusts valid props based on the type of `component`.
8
+ */
9
+ export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
10
+ <RootComponent extends React.ElementType>(props: {
11
+ /**
12
+ * The component used for the root node.
13
+ * Either a string to use a HTML element or a component.
14
+ */
15
+ component: RootComponent;
16
+ } & OverrideProps<TypeMap, RootComponent>): React.JSX.Element | null;
17
+ (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
18
+ }
19
+ /**
20
+ * Props of the component if `component={Component}` is used.
21
+ */
22
+ export type OverrideProps<TypeMap extends OverridableTypeMap, RootComponent extends React.ElementType> = (BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithRef<RootComponent>, keyof BaseProps<TypeMap>>);
23
+ /**
24
+ * Props if `component={Component}` is NOT used.
25
+ */
26
+ export type DefaultComponentProps<TypeMap extends OverridableTypeMap> = BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithRef<TypeMap['defaultComponent']>, keyof BaseProps<TypeMap>>;
27
+ /**
28
+ * Props defined on the component (+ common material-ui props).
29
+ */
30
+ export type BaseProps<TypeMap extends OverridableTypeMap> = TypeMap['props'] & CommonProps;
31
+ /**
32
+ * Props that are valid for material-ui components.
33
+ */
34
+ export interface CommonProps extends StyledComponentProps<never> {
35
+ className?: string;
36
+ style?: React.CSSProperties;
37
+ }
38
+ export interface OverridableTypeMap {
39
+ props: {};
40
+ defaultComponent: React.ElementType;
41
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "module": "./index.js",
4
+ "main": "../node/OverridableComponent/index.js",
5
+ "types": "./index.d.ts"
6
+ }
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { OverridableStringUnion } from '@mui/types';
3
3
  import { SxProps } from '@mui/system';
4
- import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
4
+ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
5
5
  import { Theme } from '../styles';
6
6
  import { UsePaginationItem } from '../usePagination/usePagination';
7
7
  import { PaginationItemClasses } from './paginationItemClasses';
@@ -245,9 +245,9 @@ export function useSlider(parameters) {
245
245
  let newValue = valueInput;
246
246
  if (marks && step == null) {
247
247
  const maxMarksValue = marksValues[marksValues.length - 1];
248
- if (newValue > maxMarksValue) {
248
+ if (newValue >= maxMarksValue) {
249
249
  newValue = maxMarksValue;
250
- } else if (newValue < marksValues[0]) {
250
+ } else if (newValue <= marksValues[0]) {
251
251
  newValue = marksValues[0];
252
252
  } else {
253
253
  newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
@@ -22,8 +22,15 @@ const styles = {
22
22
  transform: 'translateZ(0)'
23
23
  }
24
24
  };
25
+ function isObjectEmpty(object) {
26
+ // eslint-disable-next-line
27
+ for (const _ in object) {
28
+ return false;
29
+ }
30
+ return true;
31
+ }
25
32
  function isEmpty(obj) {
26
- return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
33
+ return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
27
34
  }
28
35
 
29
36
  /**
@@ -48,14 +55,18 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
48
55
  const {
49
56
  current: isControlled
50
57
  } = React.useRef(value != null);
51
- const inputRef = React.useRef(null);
52
- const handleRef = useForkRef(forwardedRef, inputRef);
58
+ const textareaRef = React.useRef(null);
59
+ const handleRef = useForkRef(forwardedRef, textareaRef);
53
60
  const heightRef = React.useRef(null);
54
- const shadowRef = React.useRef(null);
61
+ const hiddenTextareaRef = React.useRef(null);
55
62
  const calculateTextareaStyles = React.useCallback(() => {
56
- const input = inputRef.current;
57
- const containerWindow = ownerWindow(input);
58
- const computedStyle = containerWindow.getComputedStyle(input);
63
+ const textarea = textareaRef.current;
64
+ const hiddenTextarea = hiddenTextareaRef.current;
65
+ if (!textarea || !hiddenTextarea) {
66
+ return undefined;
67
+ }
68
+ const containerWindow = ownerWindow(textarea);
69
+ const computedStyle = containerWindow.getComputedStyle(textarea);
59
70
 
60
71
  // If input's width is shrunk and it's not visible, don't sync height.
61
72
  if (computedStyle.width === '0px') {
@@ -64,25 +75,24 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
64
75
  overflowing: false
65
76
  };
66
77
  }
67
- const inputShallow = shadowRef.current;
68
- inputShallow.style.width = computedStyle.width;
69
- inputShallow.value = input.value || props.placeholder || 'x';
70
- if (inputShallow.value.slice(-1) === '\n') {
78
+ hiddenTextarea.style.width = computedStyle.width;
79
+ hiddenTextarea.value = textarea.value || props.placeholder || 'x';
80
+ if (hiddenTextarea.value.slice(-1) === '\n') {
71
81
  // Certain fonts which overflow the line height will cause the textarea
72
82
  // to report a different scrollHeight depending on whether the last line
73
83
  // is empty. Make it non-empty to avoid this issue.
74
- inputShallow.value += ' ';
84
+ hiddenTextarea.value += ' ';
75
85
  }
76
86
  const boxSizing = computedStyle.boxSizing;
77
87
  const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
78
88
  const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
79
89
 
80
90
  // The height of the inner content
81
- const innerHeight = inputShallow.scrollHeight;
91
+ const innerHeight = hiddenTextarea.scrollHeight;
82
92
 
83
93
  // Measure height of a textarea with a single row
84
- inputShallow.value = 'x';
85
- const singleRowHeight = inputShallow.scrollHeight;
94
+ hiddenTextarea.value = 'x';
95
+ const singleRowHeight = hiddenTextarea.scrollHeight;
86
96
 
87
97
  // The height of the outer content
88
98
  let outerHeight = innerHeight;
@@ -103,45 +113,45 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
103
113
  };
104
114
  }, [maxRows, minRows, props.placeholder]);
105
115
  const syncHeight = React.useCallback(() => {
116
+ const textarea = textareaRef.current;
106
117
  const textareaStyles = calculateTextareaStyles();
107
- if (isEmpty(textareaStyles)) {
118
+ if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
108
119
  return;
109
120
  }
110
121
  const outerHeightStyle = textareaStyles.outerHeightStyle;
111
- const input = inputRef.current;
112
122
  if (heightRef.current !== outerHeightStyle) {
113
123
  heightRef.current = outerHeightStyle;
114
- input.style.height = `${outerHeightStyle}px`;
124
+ textarea.style.height = `${outerHeightStyle}px`;
115
125
  }
116
- input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
126
+ textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
117
127
  }, [calculateTextareaStyles]);
128
+ const frameRef = React.useRef(-1);
118
129
  useEnhancedEffect(() => {
119
- const handleResize = () => {
120
- syncHeight();
121
- };
122
- // Workaround a "ResizeObserver loop completed with undelivered notifications" error
123
- // in test.
124
- // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
125
- // Also see https://github.com/mui/mui-x/issues/8733
126
- let rAF;
127
- const rAFHandleResize = () => {
128
- cancelAnimationFrame(rAF);
129
- rAF = requestAnimationFrame(() => {
130
- handleResize();
131
- });
132
- };
133
- const debounceHandleResize = debounce(handleResize);
134
- const input = inputRef.current;
135
- const containerWindow = ownerWindow(input);
130
+ const debounceHandleResize = debounce(() => syncHeight());
131
+ const textarea = textareaRef?.current;
132
+ if (!textarea) {
133
+ return undefined;
134
+ }
135
+ const containerWindow = ownerWindow(textarea);
136
136
  containerWindow.addEventListener('resize', debounceHandleResize);
137
137
  let resizeObserver;
138
138
  if (typeof ResizeObserver !== 'undefined') {
139
- resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
140
- resizeObserver.observe(input);
139
+ resizeObserver = new ResizeObserver(() => {
140
+ // avoid "ResizeObserver loop completed with undelivered notifications" error
141
+ // by temporarily unobserving the textarea element while manipulating the height
142
+ // and reobserving one frame later
143
+ resizeObserver.unobserve(textarea);
144
+ cancelAnimationFrame(frameRef.current);
145
+ syncHeight();
146
+ frameRef.current = requestAnimationFrame(() => {
147
+ resizeObserver.observe(textarea);
148
+ });
149
+ });
150
+ resizeObserver.observe(textarea);
141
151
  }
142
152
  return () => {
143
153
  debounceHandleResize.clear();
144
- cancelAnimationFrame(rAF);
154
+ cancelAnimationFrame(frameRef.current);
145
155
  containerWindow.removeEventListener('resize', debounceHandleResize);
146
156
  if (resizeObserver) {
147
157
  resizeObserver.disconnect();
@@ -173,7 +183,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
173
183
  "aria-hidden": true,
174
184
  className: props.className,
175
185
  readOnly: true,
176
- ref: shadowRef,
186
+ ref: hiddenTextareaRef,
177
187
  tabIndex: -1,
178
188
  style: {
179
189
  ...styles.shadow,
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.4.1
2
+ * @mui/material v6.4.3
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -0,0 +1 @@
1
+ export {};
@@ -245,9 +245,9 @@ export function useSlider(parameters) {
245
245
  let newValue = valueInput;
246
246
  if (marks && step == null) {
247
247
  const maxMarksValue = marksValues[marksValues.length - 1];
248
- if (newValue > maxMarksValue) {
248
+ if (newValue >= maxMarksValue) {
249
249
  newValue = maxMarksValue;
250
- } else if (newValue < marksValues[0]) {
250
+ } else if (newValue <= marksValues[0]) {
251
251
  newValue = marksValues[0];
252
252
  } else {
253
253
  newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];
@@ -22,8 +22,15 @@ const styles = {
22
22
  transform: 'translateZ(0)'
23
23
  }
24
24
  };
25
+ function isObjectEmpty(object) {
26
+ // eslint-disable-next-line
27
+ for (const _ in object) {
28
+ return false;
29
+ }
30
+ return true;
31
+ }
25
32
  function isEmpty(obj) {
26
- return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
33
+ return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
27
34
  }
28
35
 
29
36
  /**
@@ -48,14 +55,18 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
48
55
  const {
49
56
  current: isControlled
50
57
  } = React.useRef(value != null);
51
- const inputRef = React.useRef(null);
52
- const handleRef = useForkRef(forwardedRef, inputRef);
58
+ const textareaRef = React.useRef(null);
59
+ const handleRef = useForkRef(forwardedRef, textareaRef);
53
60
  const heightRef = React.useRef(null);
54
- const shadowRef = React.useRef(null);
61
+ const hiddenTextareaRef = React.useRef(null);
55
62
  const calculateTextareaStyles = React.useCallback(() => {
56
- const input = inputRef.current;
57
- const containerWindow = ownerWindow(input);
58
- const computedStyle = containerWindow.getComputedStyle(input);
63
+ const textarea = textareaRef.current;
64
+ const hiddenTextarea = hiddenTextareaRef.current;
65
+ if (!textarea || !hiddenTextarea) {
66
+ return undefined;
67
+ }
68
+ const containerWindow = ownerWindow(textarea);
69
+ const computedStyle = containerWindow.getComputedStyle(textarea);
59
70
 
60
71
  // If input's width is shrunk and it's not visible, don't sync height.
61
72
  if (computedStyle.width === '0px') {
@@ -64,25 +75,24 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
64
75
  overflowing: false
65
76
  };
66
77
  }
67
- const inputShallow = shadowRef.current;
68
- inputShallow.style.width = computedStyle.width;
69
- inputShallow.value = input.value || props.placeholder || 'x';
70
- if (inputShallow.value.slice(-1) === '\n') {
78
+ hiddenTextarea.style.width = computedStyle.width;
79
+ hiddenTextarea.value = textarea.value || props.placeholder || 'x';
80
+ if (hiddenTextarea.value.slice(-1) === '\n') {
71
81
  // Certain fonts which overflow the line height will cause the textarea
72
82
  // to report a different scrollHeight depending on whether the last line
73
83
  // is empty. Make it non-empty to avoid this issue.
74
- inputShallow.value += ' ';
84
+ hiddenTextarea.value += ' ';
75
85
  }
76
86
  const boxSizing = computedStyle.boxSizing;
77
87
  const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
78
88
  const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
79
89
 
80
90
  // The height of the inner content
81
- const innerHeight = inputShallow.scrollHeight;
91
+ const innerHeight = hiddenTextarea.scrollHeight;
82
92
 
83
93
  // Measure height of a textarea with a single row
84
- inputShallow.value = 'x';
85
- const singleRowHeight = inputShallow.scrollHeight;
94
+ hiddenTextarea.value = 'x';
95
+ const singleRowHeight = hiddenTextarea.scrollHeight;
86
96
 
87
97
  // The height of the outer content
88
98
  let outerHeight = innerHeight;
@@ -103,45 +113,45 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
103
113
  };
104
114
  }, [maxRows, minRows, props.placeholder]);
105
115
  const syncHeight = React.useCallback(() => {
116
+ const textarea = textareaRef.current;
106
117
  const textareaStyles = calculateTextareaStyles();
107
- if (isEmpty(textareaStyles)) {
118
+ if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
108
119
  return;
109
120
  }
110
121
  const outerHeightStyle = textareaStyles.outerHeightStyle;
111
- const input = inputRef.current;
112
122
  if (heightRef.current !== outerHeightStyle) {
113
123
  heightRef.current = outerHeightStyle;
114
- input.style.height = `${outerHeightStyle}px`;
124
+ textarea.style.height = `${outerHeightStyle}px`;
115
125
  }
116
- input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
126
+ textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
117
127
  }, [calculateTextareaStyles]);
128
+ const frameRef = React.useRef(-1);
118
129
  useEnhancedEffect(() => {
119
- const handleResize = () => {
120
- syncHeight();
121
- };
122
- // Workaround a "ResizeObserver loop completed with undelivered notifications" error
123
- // in test.
124
- // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
125
- // Also see https://github.com/mui/mui-x/issues/8733
126
- let rAF;
127
- const rAFHandleResize = () => {
128
- cancelAnimationFrame(rAF);
129
- rAF = requestAnimationFrame(() => {
130
- handleResize();
131
- });
132
- };
133
- const debounceHandleResize = debounce(handleResize);
134
- const input = inputRef.current;
135
- const containerWindow = ownerWindow(input);
130
+ const debounceHandleResize = debounce(() => syncHeight());
131
+ const textarea = textareaRef?.current;
132
+ if (!textarea) {
133
+ return undefined;
134
+ }
135
+ const containerWindow = ownerWindow(textarea);
136
136
  containerWindow.addEventListener('resize', debounceHandleResize);
137
137
  let resizeObserver;
138
138
  if (typeof ResizeObserver !== 'undefined') {
139
- resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
140
- resizeObserver.observe(input);
139
+ resizeObserver = new ResizeObserver(() => {
140
+ // avoid "ResizeObserver loop completed with undelivered notifications" error
141
+ // by temporarily unobserving the textarea element while manipulating the height
142
+ // and reobserving one frame later
143
+ resizeObserver.unobserve(textarea);
144
+ cancelAnimationFrame(frameRef.current);
145
+ syncHeight();
146
+ frameRef.current = requestAnimationFrame(() => {
147
+ resizeObserver.observe(textarea);
148
+ });
149
+ });
150
+ resizeObserver.observe(textarea);
141
151
  }
142
152
  return () => {
143
153
  debounceHandleResize.clear();
144
- cancelAnimationFrame(rAF);
154
+ cancelAnimationFrame(frameRef.current);
145
155
  containerWindow.removeEventListener('resize', debounceHandleResize);
146
156
  if (resizeObserver) {
147
157
  resizeObserver.disconnect();
@@ -173,7 +183,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
173
183
  "aria-hidden": true,
174
184
  className: props.className,
175
185
  readOnly: true,
176
- ref: shadowRef,
186
+ ref: hiddenTextareaRef,
177
187
  tabIndex: -1,
178
188
  style: {
179
189
  ...styles.shadow,
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.4.1
2
+ * @mui/material v6.4.3
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -47,6 +47,13 @@ const defaultFilterOptions = createFilterOptions();
47
47
  const pageSize = 5;
48
48
  const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
49
49
  const MULTIPLE_DEFAULT_VALUE = [];
50
+ function getInputValue(value, multiple, getOptionLabel) {
51
+ if (multiple || value == null) {
52
+ return '';
53
+ }
54
+ const optionLabel = getOptionLabel(value);
55
+ return typeof optionLabel === 'string' ? optionLabel : '';
56
+ }
50
57
  function useAutocomplete(props) {
51
58
  const {
52
59
  // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -112,6 +119,10 @@ function useAutocomplete(props) {
112
119
  const [focusedTag, setFocusedTag] = React.useState(-1);
113
120
  const defaultHighlighted = autoHighlight ? 0 : -1;
114
121
  const highlightedIndexRef = React.useRef(defaultHighlighted);
122
+
123
+ // Calculate the initial inputValue on mount only.
124
+ // Using useRef since defaultValue doesn't need to update inputValue dynamically.
125
+ const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
115
126
  const [value, setValueState] = useControlled({
116
127
  controlled: valueProp,
117
128
  default: defaultValue,
@@ -119,7 +130,7 @@ function useAutocomplete(props) {
119
130
  });
120
131
  const [inputValue, setInputValueState] = useControlled({
121
132
  controlled: inputValueProp,
122
- default: '',
133
+ default: initialInputValue,
123
134
  name: componentName,
124
135
  state: 'inputValue'
125
136
  });
@@ -131,15 +142,7 @@ function useAutocomplete(props) {
131
142
  if (!isOptionSelected && !clearOnBlur) {
132
143
  return;
133
144
  }
134
- let newInputValue;
135
- if (multiple) {
136
- newInputValue = '';
137
- } else if (newValue == null) {
138
- newInputValue = '';
139
- } else {
140
- const optionLabel = getOptionLabel(newValue);
141
- newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
142
- }
145
+ const newInputValue = getInputValue(newValue, multiple, getOptionLabel);
143
146
  if (inputValue === newInputValue) {
144
147
  return;
145
148
  }
@@ -1,6 +1,6 @@
1
- export const version = "6.4.1";
1
+ export const version = "6.4.3";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("4");
4
- export const patch = Number("1");
4
+ export const patch = Number("3");
5
5
  export const prerelease = undefined;
6
6
  export default version;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -255,9 +255,9 @@ function useSlider(parameters) {
255
255
  let newValue = valueInput;
256
256
  if (marks && step == null) {
257
257
  const maxMarksValue = marksValues[marksValues.length - 1];
258
- if (newValue > maxMarksValue) {
258
+ if (newValue >= maxMarksValue) {
259
259
  newValue = maxMarksValue;
260
- } else if (newValue < marksValues[0]) {
260
+ } else if (newValue <= marksValues[0]) {
261
261
  newValue = marksValues[0];
262
262
  } else {
263
263
  newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];