@mui/base - npm Package Compare versions

Comparing version 5.0.0-alpha.86 to 5.0.0-alpha.87

BadgeUnstyled/BadgeUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

BadgeUnstyled/BadgeUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

BadgeUnstyled/badgeUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface BadgeUnstyledClasses {

BadgeUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './BadgeUnstyled';

BadgeUnstyled/useBadge.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ButtonUnstyled/ButtonUnstyled.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ButtonUnstyled/ButtonUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

ButtonUnstyled/buttonUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface ButtonUnstyledClasses {

ButtonUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './ButtonUnstyled';

ButtonUnstyled/useButton.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ButtonUnstyled/useButton.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

className/index.d.ts

 export { unstable_ClassNameGenerator } from '@mui/utils';

ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ClickAwayListener/index.d.ts

 export { default } from './ClickAwayListener';
 export * from './ClickAwayListener';

composeClasses/index.d.ts

 export { unstable_composeClasses as default } from '@mui/utils';

FormControlUnstyled/FormControlUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

FormControlUnstyled/FormControlUnstyled.js

@@ -123,2 +123,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   const classes = useUtilityClasses(ownerState);
+
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children(childContext);
+    }
+
+    return children;
+  };
+
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
@@ -130,3 +139,4 @@ const rootProps = useSlotProps({
     additionalProps: {
-      ref
+      ref,
+      children: renderChildren()
     },
@@ -136,16 +146,5 @@ ownerState,
   });
-
-  const renderChildren = () => {
-    if (typeof children === 'function') {
-      return children(childContext);
-    }
-
-    return children;
-  };
-
   return /*#__PURE__*/_jsx(FormControlUnstyledContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: renderChildren()
-    }))
+    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps))
   });
@@ -152,0 +151,0 @@ });

FormControlUnstyled/FormControlUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

FormControlUnstyled/formControlUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface FormControlUnstyledClasses {

FormControlUnstyled/FormControlUnstyledContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

FormControlUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './FormControlUnstyled';

FormControlUnstyled/useFormControlUnstyledContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

generateUtilityClass/index.d.ts

 export { unstable_generateUtilityClass as default } from '@mui/utils';
 export type { GlobalStateSlot } from '@mui/utils';

generateUtilityClasses/index.d.ts

 export { unstable_generateUtilityClasses as default } from '@mui/utils';

index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

InputUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './InputUnstyled';

InputUnstyled/InputUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

InputUnstyled/InputUnstyled.types.d.ts

@@ -126,3 +126,3 @@ import React from 'react';
     autoFocus: boolean | undefined;
-    className: string;
+    className?: string;
     id: string | undefined;
@@ -129,0 +129,0 @@ name: string | undefined;

InputUnstyled/inputUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface InputUnstyledClasses {

InputUnstyled/useInput.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

InputUnstyled/useInput.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

legacy/FormControlUnstyled/FormControlUnstyled.js

@@ -131,2 +131,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var classes = useUtilityClasses(ownerState);
+
+  var renderChildren = function renderChildren() {
+    if (typeof children === 'function') {
+      return children(childContext);
+    }
+
+    return children;
+  };
+
   var Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
@@ -138,3 +147,4 @@ var rootProps = useSlotProps({
     additionalProps: {
-      ref: ref
+      ref: ref,
+      children: renderChildren()
     },
@@ -144,16 +154,5 @@ ownerState: ownerState,
   });
-
-  var renderChildren = function renderChildren() {
-    if (typeof children === 'function') {
-      return children(childContext);
-    }
-
-    return children;
-  };
-
   return /*#__PURE__*/_jsx(FormControlUnstyledContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: renderChildren()
-    }))
+    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps))
   });
@@ -160,0 +159,0 @@ });

legacy/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

legacy/ListboxUnstyled/useListbox.js

@@ -158,4 +158,12 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
-      var keysToPreventDefault = [' ', 'Enter', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
+      var keysToPreventDefault = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
 
+      if (focusManagement === 'activeDescendant') {
+        // When the child element is focused using the activeDescendant attribute,
+        // the listbox handles keyboard events on its behalf.
+        // We have to `preventDefault()` is this case to prevent the browser from
+        // scrolling the view when space is pressed or submitting forms when enter is pressed.
+        keysToPreventDefault.push(' ', 'Enter');
+      }
+
       if (keysToPreventDefault.includes(event.key)) {
@@ -162,0 +170,0 @@ event.preventDefault();

legacy/ModalUnstyled/ModalManager.js

@@ -91,11 +91,18 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
       });
-    } // Improve Gatsby support
-    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+    }
 
+    var scrollContainer;
 
-    var parent = container.parentElement;
-    var containerWindow = ownerWindow(container);
-    var scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = ownerDocument(container).body;
+    } else {
+      // Improve Gatsby support
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      var parent = container.parentElement;
+      var containerWindow = ownerWindow(container);
+      scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+    } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.
 
+
     restoreStyle.push({
@@ -102,0 +109,0 @@ value: scrollContainer.style.overflow,

legacy/SliderUnstyled/SliderUnstyled.js

@@ -7,3 +7,2 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { chainPropTypes } from '@mui/utils';
-import appendOwnerState from '../utils/appendOwnerState';
 import isHostComponent from '../utils/isHostComponent';
@@ -14,2 +13,3 @@ import composeClasses from '../composeClasses';
 import useSlider, { valueToPercent } from './useSlider';
+import useSlotProps from '../utils/useSlotProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -74,3 +74,2 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
       onChangeCommitted = props.onChangeCommitted,
-      onMouseDown = props.onMouseDown,
       _props$orientation = props.orientation,
@@ -96,3 +95,3 @@ orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-      other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"]); // all props with defaults
+      other = _objectWithoutProperties(props, ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"]); // all props with defaults
   // consider extracting to hook an reusing the lint rule for the varints
@@ -127,3 +126,3 @@
       range = _useSlider.range,
-      focusVisible = _useSlider.focusVisible,
+      focusedThumbIndex = _useSlider.focusedThumbIndex,
       dragging = _useSlider.dragging,
@@ -139,33 +138,65 @@ marks = _useSlider.marks,
   ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  var classes = useUtilityClasses(ownerState);
   var Root = (_ref2 = component != null ? component : components.Root) != null ? _ref2 : 'span';
-  var rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+  var rootProps = useSlotProps({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    ownerState: ownerState,
+    className: [classes.root, className]
+  });
   var Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
-  var railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+  var railProps = useSlotProps({
+    elementType: Rail,
+    externalSlotProps: componentsProps.rail,
+    ownerState: ownerState,
+    className: classes.rail
+  });
   var Track = (_components$Track = components.Track) != null ? _components$Track : 'span';
-  var trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-
-  var trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-
+  var trackProps = useSlotProps({
+    elementType: Track,
+    externalSlotProps: componentsProps.track,
+    additionalProps: {
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState: ownerState,
+    className: classes.track
+  });
   var Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-  var thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+  var thumbProps = useSlotProps({
+    elementType: Thumb,
+    getSlotProps: getThumbProps,
+    externalSlotProps: componentsProps.thumb,
+    ownerState: ownerState
+  });
   var ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : SliderValueLabelUnstyled;
-  var valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+  var valueLabelProps = useSlotProps({
+    elementType: ValueLabel,
+    externalSlotProps: componentsProps.valueLabel,
+    ownerState: ownerState
+  });
   var Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
-  var markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+  var markProps = useSlotProps({
+    elementType: Mark,
+    externalSlotProps: componentsProps.mark,
+    ownerState: ownerState,
+    className: classes.mark
+  });
   var MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
-  var markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+  var markLabelProps = useSlotProps({
+    elementType: MarkLabel,
+    externalSlotProps: componentsProps.markLabel,
+    ownerState: ownerState
+  });
   var Input = components.Input || 'input';
-  var inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-  var hiddenInputProps = getHiddenInputProps();
-  var classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, getRootProps({
-    onMouseDown: onMouseDown
-  }), {
-    className: clsx(classes.root, rootProps.className, className),
-    children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps, {
-      className: clsx(classes.rail, railProps.className)
-    })), /*#__PURE__*/_jsx(Track, _extends({}, trackProps, {
-      className: clsx(classes.track, trackProps.className),
-      style: _extends({}, trackStyle, trackProps.style)
-    })), marks.filter(function (mark) {
+  var inputProps = useSlotProps({
+    elementType: Input,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: componentsProps.input,
+    ownerState: ownerState
+  });
+  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+    children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps)), /*#__PURE__*/_jsx(Track, _extends({}, trackProps)), marks.filter(function (mark) {
       return mark.value >= min && mark.value <= max;
@@ -190,3 +221,3 @@ }).map(function (mark, index) {
           style: _extends({}, style, markProps.style),
-          className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
+          className: clsx(markProps.className, markActive && classes.markActive)
         })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabel, _extends({
@@ -218,9 +249,10 @@ "aria-hidden": true,
           children: /*#__PURE__*/_jsx(Thumb, _extends({
-            "data-index": index
-          }, thumbProps, getThumbProps(), {
-            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
               pointerEvents: disableSwap && active !== index ? 'none' : undefined
             }, thumbProps.style),
-            children: /*#__PURE__*/_jsx(Input, _extends({}, hiddenInputProps, {
+            children: /*#__PURE__*/_jsx(Input, _extends({
               "data-index": index,
@@ -231,7 +263,3 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               value: values[index]
-            }, !isHostComponent(Input) && {
-              ownerState: _extends({}, ownerState, inputProps.ownerState)
-            }, inputProps, {
-              style: _extends({}, hiddenInputProps.style, inputProps.style)
-            }))
+            }, inputProps))
           }))
@@ -324,10 +352,10 @@ }))
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
       children: PropTypes.element,
@@ -342,3 +370,3 @@ className: PropTypes.string,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
@@ -436,7 +464,2 @@
   /**
-   * @ignore
-   */
-  onMouseDown: PropTypes.func,
-
-  /**
    * The component orientation.
@@ -443,0 +466,0 @@ * @default 'horizontal'

legacy/SliderUnstyled/useSlider.js

@@ -278,4 +278,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   var _React$useState4 = React.useState(-1),
-      focusVisible = _React$useState4[0],
-      setFocusVisible = _React$useState4[1];
+      focusedThumbIndex = _React$useState4[0],
+      setFocusedThumbIndex = _React$useState4[1];
 
@@ -294,3 +294,3 @@ var sliderRef = React.useRef();
       if (isFocusVisibleRef.current === true) {
-        setFocusVisible(index);
+        setFocusedThumbIndex(index);
       }
@@ -310,3 +310,3 @@
       if (isFocusVisibleRef.current === false) {
-        setFocusVisible(-1);
+        setFocusedThumbIndex(-1);
       }
@@ -335,4 +335,4 @@
 
-  if (disabled && focusVisible !== -1) {
-    setFocusVisible(-1);
+  if (disabled && focusedThumbIndex !== -1) {
+    setFocusedThumbIndex(-1);
   }
@@ -387,3 +387,3 @@
       setValueState(newValue);
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
 
@@ -705,9 +705,8 @@ if (handleChange) {
     };
-
-    var mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-
-    return _extends({}, mergedEventHandlers);
+    return _extends({}, otherHandlers, ownEventHandlers);
   };
 
   var getHiddenInputProps = function getHiddenInputProps() {
+    var _parameters$step2;
+
     var otherHandlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -732,3 +731,3 @@ var ownEventHandlers = {
       max: parameters.max,
-      step: parameters.step,
+      step: (_parameters$step2 = parameters.step) != null ? _parameters$step2 : undefined,
       disabled: disabled
@@ -750,3 +749,3 @@ }, mergedEventHandlers, {
     dragging: dragging,
-    focusVisible: focusVisible,
+    focusedThumbIndex: focusedThumbIndex,
     getHiddenInputProps: getHiddenInputProps,
@@ -753,0 +752,0 @@ getRootProps: getRootProps,

legacy/TextareaAutosize/TextareaAutosize.js

@@ -5,2 +5,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
+import { flushSync } from 'react-dom';
 import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
@@ -29,2 +30,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 };
+
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+
 var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
@@ -51,3 +57,3 @@ var onChange = props.onChange,
 
-  var syncHeight = React.useCallback(function () {
+  var getUpdatedState = React.useCallback(function () {
     var input = inputRef.current;
@@ -58,3 +64,3 @@ var containerWindow = ownerWindow(input);
     if (computedStyle.width === '0px') {
-      return;
+      return {};
     }
@@ -96,26 +102,71 @@
     var overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    setState(function (prevState) {
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-        renders.current += 1;
-        return {
-          overflow: overflow,
-          outerHeightStyle: outerHeightStyle
-        };
-      }
+    return {
+      outerHeightStyle: outerHeightStyle,
+      overflow: overflow
+    };
+  }, [maxRows, minRows, props.placeholder]);
 
-      if (process.env.NODE_ENV !== 'production') {
-        if (renders.current === 20) {
-          console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-        }
+  var updateState = function updateState(prevState, newState) {
+    var outerHeightStyle = newState.outerHeightStyle,
+        overflow = newState.overflow; // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+
+    if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+      renders.current += 1;
+      return {
+        overflow: overflow,
+        outerHeightStyle: outerHeightStyle
+      };
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (renders.current === 20) {
+        console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
       }
+    }
 
-      return prevState;
+    return prevState;
+  };
+
+  var syncHeight = React.useCallback(function () {
+    var newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    }
+
+    setState(function (prevState) {
+      return updateState(prevState, newState);
     });
-  }, [maxRows, minRows, props.placeholder]);
+  }, [getUpdatedState]);
+
+  var syncHeightWithFlushSycn = function syncHeightWithFlushSycn() {
+    var newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+    // Related issue - https://github.com/facebook/react/issues/24331
+
+
+    flushSync(function () {
+      setState(function (prevState) {
+        return updateState(prevState, newState);
+      });
+    });
+  };
+
   React.useEffect(function () {
     var handleResize = debounce(function () {
-      renders.current = 0;
-      syncHeight();
+      renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/32640
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+
+      if (inputRef.current) {
+        syncHeightWithFlushSycn();
+      }
     });
@@ -139,3 +190,3 @@ var containerWindow = ownerWindow(inputRef.current);
     };
-  }, [syncHeight]);
+  });
   useEnhancedEffect(function () {
@@ -142,0 +193,0 @@ syncHeight();

legacy/utils/appendOwnerState.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import isHostComponent from './isHostComponent';
 /**
+ * Type of the ownerState based on the type of an element it applies to.
+ * This resolves to the provided OwnerState for React components and `undefined` for host components.
+ * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+ */
+
+/**
  * Appends the ownerState object to the props, merging with the existing one if necessary.
  *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
- * @param existingProps Props of the element.
+ * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+ * @param otherProps Props of the element.
  * @param ownerState
  */
-
 export default function appendOwnerState(elementType) {
-  var existingProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var otherProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var ownerState = arguments.length > 2 ? arguments[2] : undefined;
 
   if (isHostComponent(elementType)) {
-    return existingProps;
+    return otherProps;
   }
 
-  return _extends({}, existingProps, {
-    ownerState: _extends({}, existingProps.ownerState, ownerState)
+  return _extends({}, otherProps, {
+    ownerState: _extends({}, otherProps.ownerState, ownerState)
   });
 }

legacy/utils/index.js

@@ -5,3 +5,4 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as isHostComponent } from './isHostComponent';
+export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export * from './types';

legacy/utils/mergeSlotProps.js

@@ -31,10 +31,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    var _props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps, {
-      className: _joinedClasses
-    });
+    var _mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
 
-    if (_joinedClasses.length === 0) {
-      delete _props.className;
+    var _props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+
+    if (_joinedClasses.length > 0) {
+      _props.className = _joinedClasses;
     }
 
+    if (Object.keys(_mergedStyle).length > 0) {
+      _props.style = _mergedStyle;
+    }
+
     return {
@@ -54,10 +58,14 @@ props: _props,
 
-  var props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
-    className: joinedClasses
-  });
+  var mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
 
-  if (joinedClasses.length === 0) {
-    delete props.className;
+  var props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
   }
 
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+
   return {
@@ -64,0 +72,0 @@ props: props,

ListboxUnstyled/defaultListboxReducer.d.ts

 import { ListboxState, ListboxAction } from './useListbox.types';
 export default function defaultListboxReducer<TOption>(state: Readonly<ListboxState<TOption>>, action: ListboxAction<TOption>): Readonly<ListboxState<TOption>>;

ListboxUnstyled/index.d.ts

 export { default as useListbox } from './useListbox';
 export { default as defaultListboxReducer } from './defaultListboxReducer';
 export * from './useListbox.types';

ListboxUnstyled/useControllableReducer.d.ts

 import { ListboxAction, ListboxReducer, ListboxState, UseListboxStrictProps } from './useListbox.types';
 export default function useControllableReducer<TOption>(internalReducer: ListboxReducer<TOption>, externalReducer: ListboxReducer<TOption> | undefined, props: UseListboxStrictProps<TOption>): [ListboxState<TOption>, (action: ListboxAction<TOption>) => void];

ListboxUnstyled/useListbox.d.ts

@@ -0,0 +0,0 @@ import { UseListboxParameters, OptionState, UseListboxOptionSlotProps, UseListboxRootSlotProps } from './useListbox.types';

ListboxUnstyled/useListbox.js

@@ -135,4 +135,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    const keysToPreventDefault = [' ', 'Enter', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
+    const keysToPreventDefault = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
 
+    if (focusManagement === 'activeDescendant') {
+      // When the child element is focused using the activeDescendant attribute,
+      // the listbox handles keyboard events on its behalf.
+      // We have to `preventDefault()` is this case to prevent the browser from
+      // scrolling the view when space is pressed or submitting forms when enter is pressed.
+      keysToPreventDefault.push(' ', 'Enter');
+    }
+
     if (keysToPreventDefault.includes(event.key)) {
@@ -139,0 +147,0 @@ event.preventDefault();

ListboxUnstyled/useListbox.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MenuItemUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './MenuItemUnstyled';

MenuItemUnstyled/MenuItemUnstyled.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MenuItemUnstyled/MenuItemUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MenuItemUnstyled/menuItemUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface MenuItemUnstyledClasses {

MenuItemUnstyled/useMenuItem.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MenuItemUnstyled/useMenuItem.types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

MenuUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './MenuUnstyled';

MenuUnstyled/MenuUnstyled.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MenuUnstyled/MenuUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

MenuUnstyled/menuUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface MenuUnstyledClasses {

MenuUnstyled/MenuUnstyledContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MenuUnstyled/useMenu.d.ts

 import { MenuItemMetadata, MenuItemState, UseMenuListboxSlotProps, UseMenuParameters } from './useMenu.types';
 import { EventHandlers } from '../utils';
 export default function useMenu(parameters?: UseMenuParameters): {
-    registerItem: (id: any, metadata: any) => void;
-    unregisterItem: (id: any) => void;
+    registerItem: (id: string, metadata: MenuItemMetadata) => void;
+    unregisterItem: (id: string) => void;
     menuItems: Record<string, MenuItemMetadata>;
@@ -7,0 +7,0 @@ getListboxProps: <TOther extends EventHandlers>(otherHandlers?: TOther) => UseMenuListboxSlotProps;

MenuUnstyled/useMenu.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

ModalUnstyled/ModalManager.d.ts

@@ -0,0 +0,0 @@ export interface ManagedModalProps {

ModalUnstyled/ModalManager.js

@@ -86,11 +86,18 @@ import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
       });
-    } // Improve Gatsby support
-    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+    }
 
+    let scrollContainer;
 
-    const parent = container.parentElement;
-    const containerWindow = ownerWindow(container);
-    const scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = ownerDocument(container).body;
+    } else {
+      // Improve Gatsby support
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = ownerWindow(container);
+      scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+    } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.
 
+
     restoreStyle.push({
@@ -97,0 +104,0 @@ value: scrollContainer.style.overflow,

ModalUnstyled/ModalUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';

ModalUnstyled/modalUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface ModalUnstyledClasses {

modern/FormControlUnstyled/FormControlUnstyled.js

@@ -121,2 +121,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   const classes = useUtilityClasses(ownerState);
+
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children(childContext);
+    }
+
+    return children;
+  };
+
   const Root = component ?? components.Root ?? 'div';
@@ -128,3 +137,4 @@ const rootProps = useSlotProps({
     additionalProps: {
-      ref
+      ref,
+      children: renderChildren()
     },
@@ -134,16 +144,5 @@ ownerState,
   });
-
-  const renderChildren = () => {
-    if (typeof children === 'function') {
-      return children(childContext);
-    }
-
-    return children;
-  };
-
   return /*#__PURE__*/_jsx(FormControlUnstyledContext.Provider, {
     value: childContext,
-    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
-      children: renderChildren()
-    }))
+    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps))
   });
@@ -150,0 +149,0 @@ });

modern/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

modern/ListboxUnstyled/useListbox.js

@@ -127,4 +127,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    const keysToPreventDefault = [' ', 'Enter', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
+    const keysToPreventDefault = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
 
+    if (focusManagement === 'activeDescendant') {
+      // When the child element is focused using the activeDescendant attribute,
+      // the listbox handles keyboard events on its behalf.
+      // We have to `preventDefault()` is this case to prevent the browser from
+      // scrolling the view when space is pressed or submitting forms when enter is pressed.
+      keysToPreventDefault.push(' ', 'Enter');
+    }
+
     if (keysToPreventDefault.includes(event.key)) {
@@ -131,0 +139,0 @@ event.preventDefault();

modern/ModalUnstyled/ModalManager.js

@@ -86,11 +86,18 @@ import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
       });
-    } // Improve Gatsby support
-    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+    }
 
+    let scrollContainer;
 
-    const parent = container.parentElement;
-    const containerWindow = ownerWindow(container);
-    const scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = ownerDocument(container).body;
+    } else {
+      // Improve Gatsby support
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = ownerWindow(container);
+      scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+    } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.
 
+
     restoreStyle.push({
@@ -97,0 +104,0 @@ value: scrollContainer.style.overflow,

modern/SliderUnstyled/SliderUnstyled.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+const _excluded = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 import * as React from 'react';
@@ -8,3 +8,2 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
-import appendOwnerState from '../utils/appendOwnerState';
 import isHostComponent from '../utils/isHostComponent';
@@ -15,2 +14,3 @@ import composeClasses from '../composeClasses';
 import useSlider, { valueToPercent } from './useSlider';
+import useSlotProps from '../utils/useSlotProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -65,3 +65,2 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
     min = 0,
-    onMouseDown,
     orientation = 'horizontal',
@@ -105,3 +104,3 @@ scale = Identity,
     range,
-    focusVisible,
+    focusedThumbIndex,
     dragging,
@@ -117,33 +116,65 @@ marks,
   ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
   const Root = component ?? components.Root ?? 'span';
-  const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+  const rootProps = useSlotProps({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    ownerState,
+    className: [classes.root, className]
+  });
   const Rail = components.Rail ?? 'span';
-  const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+  const railProps = useSlotProps({
+    elementType: Rail,
+    externalSlotProps: componentsProps.rail,
+    ownerState,
+    className: classes.rail
+  });
   const Track = components.Track ?? 'span';
-  const trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-
-  const trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-
+  const trackProps = useSlotProps({
+    elementType: Track,
+    externalSlotProps: componentsProps.track,
+    additionalProps: {
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState,
+    className: classes.track
+  });
   const Thumb = components.Thumb ?? 'span';
-  const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+  const thumbProps = useSlotProps({
+    elementType: Thumb,
+    getSlotProps: getThumbProps,
+    externalSlotProps: componentsProps.thumb,
+    ownerState
+  });
   const ValueLabel = components.ValueLabel ?? SliderValueLabelUnstyled;
-  const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+  const valueLabelProps = useSlotProps({
+    elementType: ValueLabel,
+    externalSlotProps: componentsProps.valueLabel,
+    ownerState
+  });
   const Mark = components.Mark ?? 'span';
-  const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+  const markProps = useSlotProps({
+    elementType: Mark,
+    externalSlotProps: componentsProps.mark,
+    ownerState,
+    className: classes.mark
+  });
   const MarkLabel = components.MarkLabel ?? 'span';
-  const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+  const markLabelProps = useSlotProps({
+    elementType: MarkLabel,
+    externalSlotProps: componentsProps.markLabel,
+    ownerState
+  });
   const Input = components.Input || 'input';
-  const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-  const hiddenInputProps = getHiddenInputProps();
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, getRootProps({
-    onMouseDown
-  }), {
-    className: clsx(classes.root, rootProps.className, className),
-    children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps, {
-      className: clsx(classes.rail, railProps.className)
-    })), /*#__PURE__*/_jsx(Track, _extends({}, trackProps, {
-      className: clsx(classes.track, trackProps.className),
-      style: _extends({}, trackStyle, trackProps.style)
-    })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  const inputProps = useSlotProps({
+    elementType: Input,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: componentsProps.input,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+    children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps)), /*#__PURE__*/_jsx(Track, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = valueToPercent(mark.value, min, max);
@@ -166,3 +197,3 @@ const style = axisProps[axis].offset(percent);
           style: _extends({}, style, markProps.style),
-          className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
+          className: clsx(markProps.className, markActive && classes.markActive)
         })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabel, _extends({
@@ -194,9 +225,10 @@ "aria-hidden": true,
           children: /*#__PURE__*/_jsx(Thumb, _extends({
-            "data-index": index
-          }, thumbProps, getThumbProps(), {
-            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
               pointerEvents: disableSwap && active !== index ? 'none' : undefined
             }, thumbProps.style),
-            children: /*#__PURE__*/_jsx(Input, _extends({}, hiddenInputProps, {
+            children: /*#__PURE__*/_jsx(Input, _extends({
               "data-index": index,
@@ -207,7 +239,3 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               value: values[index]
-            }, !isHostComponent(Input) && {
-              ownerState: _extends({}, ownerState, inputProps.ownerState)
-            }, inputProps, {
-              style: _extends({}, hiddenInputProps.style, inputProps.style)
-            }))
+            }, inputProps))
           }))
@@ -300,10 +328,10 @@ }))
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
       children: PropTypes.element,
@@ -318,3 +346,3 @@ className: PropTypes.string,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
@@ -412,7 +440,2 @@
   /**
-   * @ignore
-   */
-  onMouseDown: PropTypes.func,
-
-  /**
    * The component orientation.
@@ -419,0 +442,0 @@ * @default 'horizontal'

modern/SliderUnstyled/useSlider.js

@@ -230,3 +230,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   } = useIsFocusVisible();
-  const [focusVisible, setFocusVisible] = React.useState(-1);
+  const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
   const sliderRef = React.useRef();
@@ -241,3 +241,3 @@ const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     if (isFocusVisibleRef.current === true) {
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
     }
@@ -253,3 +253,3 @@
     if (isFocusVisibleRef.current === false) {
-      setFocusVisible(-1);
+      setFocusedThumbIndex(-1);
     }
@@ -275,4 +275,4 @@
 
-  if (disabled && focusVisible !== -1) {
-    setFocusVisible(-1);
+  if (disabled && focusedThumbIndex !== -1) {
+    setFocusedThumbIndex(-1);
   }
@@ -324,3 +324,3 @@
     setValueState(newValue);
-    setFocusVisible(index);
+    setFocusedThumbIndex(index);
 
@@ -630,6 +630,3 @@ if (handleChange) {
     };
-
-    const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-
-    return _extends({}, mergedEventHandlers);
+    return _extends({}, otherHandlers, ownEventHandlers);
   };
@@ -656,3 +653,3 @@
       max: parameters.max,
-      step: parameters.step,
+      step: parameters.step ?? undefined,
       disabled
@@ -674,3 +671,3 @@ }, mergedEventHandlers, {
     dragging,
-    focusVisible,
+    focusedThumbIndex,
     getHiddenInputProps,
@@ -677,0 +674,0 @@ getRootProps,

modern/TextareaAutosize/TextareaAutosize.js

@@ -6,2 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
+import { flushSync } from 'react-dom';
 import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
@@ -30,2 +31,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 };
+
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+
 const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
@@ -49,3 +55,3 @@ const {
   const [state, setState] = React.useState({});
-  const syncHeight = React.useCallback(() => {
+  const getUpdatedState = React.useCallback(() => {
     const input = inputRef.current;
@@ -56,3 +62,3 @@ const containerWindow = ownerWindow(input);
     if (computedStyle.width === '0px') {
-      return;
+      return {};
     }
@@ -94,26 +100,73 @@
     const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    setState(prevState => {
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-        renders.current += 1;
-        return {
-          overflow,
-          outerHeightStyle
-        };
-      }
+    return {
+      outerHeightStyle,
+      overflow
+    };
+  }, [maxRows, minRows, props.placeholder]);
 
-      if (process.env.NODE_ENV !== 'production') {
-        if (renders.current === 20) {
-          console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-        }
+  const updateState = (prevState, newState) => {
+    const {
+      outerHeightStyle,
+      overflow
+    } = newState; // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+
+    if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+      renders.current += 1;
+      return {
+        overflow,
+        outerHeightStyle
+      };
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (renders.current === 20) {
+        console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
       }
+    }
 
-      return prevState;
+    return prevState;
+  };
+
+  const syncHeight = React.useCallback(() => {
+    const newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    }
+
+    setState(prevState => {
+      return updateState(prevState, newState);
     });
-  }, [maxRows, minRows, props.placeholder]);
+  }, [getUpdatedState]);
+
+  const syncHeightWithFlushSycn = () => {
+    const newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+    // Related issue - https://github.com/facebook/react/issues/24331
+
+
+    flushSync(() => {
+      setState(prevState => {
+        return updateState(prevState, newState);
+      });
+    });
+  };
+
   React.useEffect(() => {
     const handleResize = debounce(() => {
-      renders.current = 0;
-      syncHeight();
+      renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/32640
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+
+      if (inputRef.current) {
+        syncHeightWithFlushSycn();
+      }
     });
@@ -137,3 +190,3 @@ const containerWindow = ownerWindow(inputRef.current);
     };
-  }, [syncHeight]);
+  });
   useEnhancedEffect(() => {
@@ -140,0 +193,0 @@ syncHeight();

modern/utils/appendOwnerState.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import isHostComponent from './isHostComponent';
 /**
+ * Type of the ownerState based on the type of an element it applies to.
+ * This resolves to the provided OwnerState for React components and `undefined` for host components.
+ * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+ */
+
+/**
  * Appends the ownerState object to the props, merging with the existing one if necessary.
  *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
- * @param existingProps Props of the element.
+ * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+ * @param otherProps Props of the element.
  * @param ownerState
  */
-
-export default function appendOwnerState(elementType, existingProps = {}, ownerState) {
+export default function appendOwnerState(elementType, otherProps = {}, ownerState) {
   if (isHostComponent(elementType)) {
-    return existingProps;
+    return otherProps;
   }
 
-  return _extends({}, existingProps, {
-    ownerState: _extends({}, existingProps.ownerState, ownerState)
+  return _extends({}, otherProps, {
+    ownerState: _extends({}, otherProps.ownerState, ownerState)
   });
 }

modern/utils/index.js

@@ -5,3 +5,4 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as isHostComponent } from './isHostComponent';
+export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export * from './types';

modern/utils/mergeSlotProps.js

@@ -33,10 +33,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps, {
-      className: joinedClasses
-    });
+    const mergedStyle = _extends({}, additionalProps?.style, externalForwardedProps?.style, externalSlotProps?.style);
 
-    if (joinedClasses.length === 0) {
-      delete props.className;
+    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
     }
 
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+
     return {
@@ -56,10 +60,14 @@ props,
 
-  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
-    className: joinedClasses
-  });
+  const mergedStyle = _extends({}, internalSlotProps?.style, additionalProps?.style, externalForwardedProps?.style, externalSlotProps?.style);
 
-  if (joinedClasses.length === 0) {
-    delete props.className;
+  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
   }
 
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+
   return {
@@ -66,0 +74,0 @@ props,

MultiSelectUnstyled/index.d.ts

 export { default } from './MultiSelectUnstyled';
 export * from './MultiSelectUnstyled.types';

MultiSelectUnstyled/MultiSelectUnstyled.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

MultiSelectUnstyled/MultiSelectUnstyled.types.d.ts

@@ -64,3 +64,3 @@ import * as React from 'react';
     anchorEl: PopperUnstyledProps['anchorEl'];
-    children?: React.ReactNode;
+    children?: PopperUnstyledProps['children'];
     className: string | undefined;
@@ -67,0 +67,0 @@ disablePortal: PopperUnstyledProps['disablePortal'];

node/FormControlUnstyled/FormControlUnstyled.js

@@ -145,2 +145,11 @@ "use strict";
   const classes = useUtilityClasses(ownerState);
+
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children(childContext);
+    }
+
+    return children;
+  };
+
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'div';
@@ -152,3 +161,4 @@ const rootProps = (0, _utils2.useSlotProps)({
     additionalProps: {
-      ref
+      ref,
+      children: renderChildren()
     },
@@ -158,16 +168,5 @@ ownerState,
   });
-
-  const renderChildren = () => {
-    if (typeof children === 'function') {
-      return children(childContext);
-    }
-
-    return children;
-  };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControlUnstyledContext.default.Provider, {
     value: childContext,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
-      children: renderChildren()
-    }))
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps))
   });
@@ -174,0 +173,0 @@ });

node/index.js

@@ -1,2 +0,2 @@
-/** @license MUI v5.0.0-alpha.86
+/** @license MUI v5.0.0-alpha.87
  *
@@ -3,0 +3,0 @@ * This source code is licensed under the MIT license found in the

node/ListboxUnstyled/useListbox.js

@@ -153,4 +153,12 @@ "use strict";
 
-    const keysToPreventDefault = [' ', 'Enter', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
+    const keysToPreventDefault = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'];
 
+    if (focusManagement === 'activeDescendant') {
+      // When the child element is focused using the activeDescendant attribute,
+      // the listbox handles keyboard events on its behalf.
+      // We have to `preventDefault()` is this case to prevent the browser from
+      // scrolling the view when space is pressed or submitting forms when enter is pressed.
+      keysToPreventDefault.push(' ', 'Enter');
+    }
+
     if (keysToPreventDefault.includes(event.key)) {
@@ -157,0 +165,0 @@ event.preventDefault();

node/ModalUnstyled/ModalManager.js

@@ -94,11 +94,18 @@ "use strict";
       });
-    } // Improve Gatsby support
-    // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+    }
 
+    let scrollContainer;
 
-    const parent = container.parentElement;
-    const containerWindow = (0, _utils.unstable_ownerWindow)(container);
-    const scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; // Block the scroll even if no scrollbar is visible to account for mobile keyboard
+    if (container.parentNode instanceof DocumentFragment) {
+      scrollContainer = (0, _utils.unstable_ownerDocument)(container).body;
+    } else {
+      // Improve Gatsby support
+      // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
+      const parent = container.parentElement;
+      const containerWindow = (0, _utils.unstable_ownerWindow)(container);
+      scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
+    } // Block the scroll even if no scrollbar is visible to account for mobile keyboard
     // screensize shrink.
 
+
     restoreStyle.push({
@@ -105,0 +112,0 @@ value: scrollContainer.style.overflow,

node/SliderUnstyled/SliderUnstyled.js

@@ -22,4 +22,2 @@ "use strict";
 
-var _appendOwnerState = _interopRequireDefault(require("../utils/appendOwnerState"));
-
 var _isHostComponent = _interopRequireDefault(require("../utils/isHostComponent"));
@@ -35,5 +33,7 @@
 
+var _useSlotProps = _interopRequireDefault(require("../utils/useSlotProps"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+const _excluded = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 
@@ -92,3 +92,2 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
     min = 0,
-    onMouseDown,
     orientation = 'horizontal',
@@ -130,3 +129,3 @@ scale = Identity,
     range,
-    focusVisible,
+    focusedThumbIndex,
     dragging,
@@ -142,31 +141,65 @@ marks,
   ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-  const rootProps = (0, _appendOwnerState.default)(Root, (0, _extends2.default)({}, other, componentsProps.root), ownerState);
+  const rootProps = (0, _useSlotProps.default)({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    ownerState,
+    className: [classes.root, className]
+  });
   const Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
-  const railProps = (0, _appendOwnerState.default)(Rail, componentsProps.rail, ownerState);
+  const railProps = (0, _useSlotProps.default)({
+    elementType: Rail,
+    externalSlotProps: componentsProps.rail,
+    ownerState,
+    className: classes.rail
+  });
   const Track = (_components$Track = components.Track) != null ? _components$Track : 'span';
-  const trackProps = (0, _appendOwnerState.default)(Track, componentsProps.track, ownerState);
-  const trackStyle = (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
+  const trackProps = (0, _useSlotProps.default)({
+    elementType: Track,
+    externalSlotProps: componentsProps.track,
+    additionalProps: {
+      style: (0, _extends2.default)({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState,
+    className: classes.track
+  });
   const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-  const thumbProps = (0, _appendOwnerState.default)(Thumb, componentsProps.thumb, ownerState);
+  const thumbProps = (0, _useSlotProps.default)({
+    elementType: Thumb,
+    getSlotProps: getThumbProps,
+    externalSlotProps: componentsProps.thumb,
+    ownerState
+  });
   const ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : _SliderValueLabelUnstyled.default;
-  const valueLabelProps = (0, _appendOwnerState.default)(ValueLabel, componentsProps.valueLabel, ownerState);
+  const valueLabelProps = (0, _useSlotProps.default)({
+    elementType: ValueLabel,
+    externalSlotProps: componentsProps.valueLabel,
+    ownerState
+  });
   const Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
-  const markProps = (0, _appendOwnerState.default)(Mark, componentsProps.mark, ownerState);
+  const markProps = (0, _useSlotProps.default)({
+    elementType: Mark,
+    externalSlotProps: componentsProps.mark,
+    ownerState,
+    className: classes.mark
+  });
   const MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
-  const markLabelProps = (0, _appendOwnerState.default)(MarkLabel, componentsProps.markLabel, ownerState);
+  const markLabelProps = (0, _useSlotProps.default)({
+    elementType: MarkLabel,
+    externalSlotProps: componentsProps.markLabel,
+    ownerState
+  });
   const Input = components.Input || 'input';
-  const inputProps = (0, _appendOwnerState.default)(Input, componentsProps.input, ownerState);
-  const hiddenInputProps = getHiddenInputProps();
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, getRootProps({
-    onMouseDown
-  }), {
-    className: (0, _clsx.default)(classes.root, rootProps.className, className),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rail, (0, _extends2.default)({}, railProps, {
-      className: (0, _clsx.default)(classes.rail, railProps.className)
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Track, (0, _extends2.default)({}, trackProps, {
-      className: (0, _clsx.default)(classes.track, trackProps.className),
-      style: (0, _extends2.default)({}, trackStyle, trackProps.style)
-    })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  const inputProps = (0, _useSlotProps.default)({
+    elementType: Input,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: componentsProps.input,
+    ownerState
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rail, (0, _extends2.default)({}, railProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Track, (0, _extends2.default)({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = (0, _useSlider.valueToPercent)(mark.value, min, max);
@@ -189,3 +222,3 @@ const style = axisProps[axis].offset(percent);
           style: (0, _extends2.default)({}, style, markProps.style),
-          className: (0, _clsx.default)(classes.mark, markProps.className, markActive && classes.markActive)
+          className: (0, _clsx.default)(markProps.className, markActive && classes.markActive)
         })), mark.label != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkLabel, (0, _extends2.default)({
@@ -217,9 +250,10 @@ "aria-hidden": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Thumb, (0, _extends2.default)({
-            "data-index": index
-          }, thumbProps, getThumbProps(), {
-            className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: (0, _clsx.default)(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: (0, _extends2.default)({}, style, {
               pointerEvents: disableSwap && active !== index ? 'none' : undefined
             }, thumbProps.style),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({}, hiddenInputProps, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Input, (0, _extends2.default)({
               "data-index": index,
@@ -230,7 +264,3 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               value: values[index]
-            }, !(0, _isHostComponent.default)(Input) && {
-              ownerState: (0, _extends2.default)({}, ownerState, inputProps.ownerState)
-            }, inputProps, {
-              style: (0, _extends2.default)({}, hiddenInputProps.style, inputProps.style)
-            }))
+            }, inputProps))
           }))
@@ -323,10 +353,10 @@ }))
   componentsProps: _propTypes.default.shape({
-    input: _propTypes.default.object,
-    mark: _propTypes.default.object,
-    markLabel: _propTypes.default.object,
-    rail: _propTypes.default.object,
-    root: _propTypes.default.object,
-    thumb: _propTypes.default.object,
-    track: _propTypes.default.object,
-    valueLabel: _propTypes.default.shape({
+    input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    mark: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    markLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    rail: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    thumb: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    track: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    valueLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
       children: _propTypes.default.element,
@@ -341,3 +371,3 @@ className: _propTypes.default.string,
       valueLabelDisplay: _propTypes.default.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
@@ -435,7 +465,2 @@
   /**
-   * @ignore
-   */
-  onMouseDown: _propTypes.default.func,
-
-  /**
    * The component orientation.
@@ -442,0 +467,0 @@ * @default 'horizontal'

node/SliderUnstyled/useSlider.js

@@ -257,3 +257,3 @@ "use strict";
   } = (0, _utils.unstable_useIsFocusVisible)();
-  const [focusVisible, setFocusVisible] = React.useState(-1);
+  const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
   const sliderRef = React.useRef();
@@ -270,3 +270,3 @@ const handleFocusRef = (0, _utils.unstable_useForkRef)(focusVisibleRef, sliderRef);
     if (isFocusVisibleRef.current === true) {
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
     }
@@ -284,3 +284,3 @@
     if (isFocusVisibleRef.current === false) {
-      setFocusVisible(-1);
+      setFocusedThumbIndex(-1);
     }
@@ -308,4 +308,4 @@
 
-  if (disabled && focusVisible !== -1) {
-    setFocusVisible(-1);
+  if (disabled && focusedThumbIndex !== -1) {
+    setFocusedThumbIndex(-1);
   }
@@ -359,3 +359,3 @@
     setValueState(newValue);
-    setFocusVisible(index);
+    setFocusedThumbIndex(index);
 
@@ -669,7 +669,8 @@ if (handleChange) {
     };
-    const mergedEventHandlers = (0, _extends2.default)({}, otherHandlers, ownEventHandlers);
-    return (0, _extends2.default)({}, mergedEventHandlers);
+    return (0, _extends2.default)({}, otherHandlers, ownEventHandlers);
   };
 
   const getHiddenInputProps = (otherHandlers = {}) => {
+    var _parameters$step;
+
     const ownEventHandlers = {
@@ -691,3 +692,3 @@ onChange: createHandleHiddenInputChange(otherHandlers || {}),
       max: parameters.max,
-      step: parameters.step,
+      step: (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
       disabled
@@ -709,3 +710,3 @@ }, mergedEventHandlers, {
     dragging,
-    focusVisible,
+    focusedThumbIndex,
     getHiddenInputProps,
@@ -712,0 +713,0 @@ getRootProps,

node/TextareaAutosize/TextareaAutosize.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _reactDom = require("react-dom");
+
 var _utils = require("@mui/utils");
@@ -48,2 +50,7 @@
 };
+
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+
 const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
@@ -66,3 +73,3 @@ const {
   const [state, setState] = React.useState({});
-  const syncHeight = React.useCallback(() => {
+  const getUpdatedState = React.useCallback(() => {
     const input = inputRef.current;
@@ -73,3 +80,3 @@ const containerWindow = (0, _utils.unstable_ownerWindow)(input);
     if (computedStyle.width === '0px') {
-      return;
+      return {};
     }
@@ -111,26 +118,73 @@
     const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    setState(prevState => {
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-        renders.current += 1;
-        return {
-          overflow,
-          outerHeightStyle
-        };
-      }
+    return {
+      outerHeightStyle,
+      overflow
+    };
+  }, [maxRows, minRows, props.placeholder]);
 
-      if (process.env.NODE_ENV !== 'production') {
-        if (renders.current === 20) {
-          console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-        }
+  const updateState = (prevState, newState) => {
+    const {
+      outerHeightStyle,
+      overflow
+    } = newState; // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+
+    if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+      renders.current += 1;
+      return {
+        overflow,
+        outerHeightStyle
+      };
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (renders.current === 20) {
+        console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
       }
+    }
 
-      return prevState;
+    return prevState;
+  };
+
+  const syncHeight = React.useCallback(() => {
+    const newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    }
+
+    setState(prevState => {
+      return updateState(prevState, newState);
     });
-  }, [maxRows, minRows, props.placeholder]);
+  }, [getUpdatedState]);
+
+  const syncHeightWithFlushSycn = () => {
+    const newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+    // Related issue - https://github.com/facebook/react/issues/24331
+
+
+    (0, _reactDom.flushSync)(() => {
+      setState(prevState => {
+        return updateState(prevState, newState);
+      });
+    });
+  };
+
   React.useEffect(() => {
     const handleResize = (0, _utils.unstable_debounce)(() => {
-      renders.current = 0;
-      syncHeight();
+      renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/32640
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+
+      if (inputRef.current) {
+        syncHeightWithFlushSycn();
+      }
     });
@@ -154,3 +208,3 @@ const containerWindow = (0, _utils.unstable_ownerWindow)(inputRef.current);
     };
-  }, [syncHeight]);
+  });
   (0, _utils.unstable_useEnhancedEffect)(() => {
@@ -157,0 +211,0 @@ syncHeight();

node/utils/appendOwnerState.js

@@ -17,14 +17,14 @@ "use strict";
  *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
- * @param existingProps Props of the element.
+ * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+ * @param otherProps Props of the element.
  * @param ownerState
  */
-function appendOwnerState(elementType, existingProps = {}, ownerState) {
+function appendOwnerState(elementType, otherProps = {}, ownerState) {
   if ((0, _isHostComponent.default)(elementType)) {
-    return existingProps;
+    return otherProps;
   }
 
-  return (0, _extends2.default)({}, existingProps, {
-    ownerState: (0, _extends2.default)({}, existingProps.ownerState, ownerState)
+  return (0, _extends2.default)({}, otherProps, {
+    ownerState: (0, _extends2.default)({}, otherProps.ownerState, ownerState)
   });
 }

node/utils/index.js

@@ -13,2 +13,3 @@ "use strict";
   isHostComponent: true,
+  resolveComponentProps: true,
   useSlotProps: true
@@ -40,2 +41,8 @@ };
 });
+Object.defineProperty(exports, "resolveComponentProps", {
+  enumerable: true,
+  get: function () {
+    return _resolveComponentProps.default;
+  }
+});
 Object.defineProperty(exports, "useSlotProps", {
@@ -56,2 +63,4 @@ enumerable: true,
 
+var _resolveComponentProps = _interopRequireDefault(require("./resolveComponentProps"));
+
 var _useSlotProps = _interopRequireDefault(require("./useSlotProps"));
@@ -58,0 +67,0 @@

node/utils/mergeSlotProps.js

@@ -44,10 +44,13 @@ "use strict";
     const joinedClasses = (0, _clsx.default)(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className);
-    const props = (0, _extends2.default)({}, additionalProps, externalForwardedProps, externalSlotProps, {
-      className: joinedClasses
-    });
+    const mergedStyle = (0, _extends2.default)({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+    const props = (0, _extends2.default)({}, additionalProps, externalForwardedProps, externalSlotProps);
 
-    if (joinedClasses.length === 0) {
-      delete props.className;
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
     }
 
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+
     return {
@@ -66,10 +69,13 @@ props,
   const joinedClasses = (0, _clsx.default)(externalForwardedProps == null ? void 0 : externalForwardedProps.className, externalSlotProps == null ? void 0 : externalSlotProps.className, className, additionalProps == null ? void 0 : additionalProps.className, internalSlotProps == null ? void 0 : internalSlotProps.className);
-  const props = (0, _extends2.default)({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
-    className: joinedClasses
-  });
+  const mergedStyle = (0, _extends2.default)({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
+  const props = (0, _extends2.default)({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
 
-  if (joinedClasses.length === 0) {
-    delete props.className;
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
   }
 
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+
   return {
@@ -76,0 +82,0 @@ props,

OptionGroupUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './OptionGroupUnstyled';

OptionGroupUnstyled/OptionGroupUnstyled.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

OptionGroupUnstyled/OptionGroupUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

OptionGroupUnstyled/optionGroupUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface OptionGroupUnstyledClasses {

OptionUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './OptionUnstyled';

OptionUnstyled/OptionUnstyled.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

OptionUnstyled/OptionUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

OptionUnstyled/optionUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface OptionUnstyledClasses {

package.json

 {
   "name": "@mui/base",
-  "version": "5.0.0-alpha.86",
+  "version": "5.0.0-alpha.87",
   "private": false,
@@ -43,3 +43,3 @@ "author": "MUI Team",
     "@mui/types": "^7.1.4",
-    "@mui/utils": "^5.8.4",
+    "@mui/utils": "^5.8.6",
     "@popperjs/core": "^2.11.5",
@@ -46,0 +46,0 @@ "clsx": "^1.1.1",

SelectUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './SelectUnstyled';

SelectUnstyled/SelectUnstyled.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

SelectUnstyled/SelectUnstyled.types.d.ts

@@ -93,3 +93,3 @@ import * as React from 'react';
     anchorEl: PopperUnstyledProps['anchorEl'];
-    children?: React.ReactNode;
+    children?: PopperUnstyledProps['children'];
     className: string | undefined;
@@ -96,0 +96,0 @@ disablePortal: PopperUnstyledProps['disablePortal'];

SelectUnstyled/selectUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface SelectUnstyledClasses {

SelectUnstyled/SelectUnstyledContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

SelectUnstyled/useSelect.d.ts

@@ -0,0 +0,0 @@ import { UseSelectMultiParameters, UseSelectMultiResult, UseSelectSingleParameters, UseSelectSingleResult } from './useSelect.types';

SelectUnstyled/useSelect.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

SelectUnstyled/utils.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

SliderUnstyled/SliderUnstyled.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "onMouseDown", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
+const _excluded = ["aria-label", "aria-valuetext", "className", "component", "classes", "disableSwap", "disabled", "getAriaLabel", "getAriaValueText", "marks", "max", "min", "name", "onChange", "onChangeCommitted", "orientation", "scale", "step", "tabIndex", "track", "value", "valueLabelDisplay", "valueLabelFormat", "isRtl", "components", "componentsProps"];
 import * as React from 'react';
@@ -8,3 +8,2 @@ import PropTypes from 'prop-types';
 import { chainPropTypes } from '@mui/utils';
-import appendOwnerState from '../utils/appendOwnerState';
 import isHostComponent from '../utils/isHostComponent';
@@ -15,2 +14,3 @@ import composeClasses from '../composeClasses';
 import useSlider, { valueToPercent } from './useSlider';
+import useSlotProps from '../utils/useSlotProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -67,3 +67,2 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
     min = 0,
-    onMouseDown,
     orientation = 'horizontal',
@@ -107,3 +106,3 @@ scale = Identity,
     range,
-    focusVisible,
+    focusedThumbIndex,
     dragging,
@@ -119,33 +118,65 @@ marks,
   ownerState.dragging = dragging;
+  ownerState.focusedThumbIndex = focusedThumbIndex;
+  const classes = useUtilityClasses(ownerState);
   const Root = (_ref = component != null ? component : components.Root) != null ? _ref : 'span';
-  const rootProps = appendOwnerState(Root, _extends({}, other, componentsProps.root), ownerState);
+  const rootProps = useSlotProps({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    ownerState,
+    className: [classes.root, className]
+  });
   const Rail = (_components$Rail = components.Rail) != null ? _components$Rail : 'span';
-  const railProps = appendOwnerState(Rail, componentsProps.rail, ownerState);
+  const railProps = useSlotProps({
+    elementType: Rail,
+    externalSlotProps: componentsProps.rail,
+    ownerState,
+    className: classes.rail
+  });
   const Track = (_components$Track = components.Track) != null ? _components$Track : 'span';
-  const trackProps = appendOwnerState(Track, componentsProps.track, ownerState);
-
-  const trackStyle = _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap));
-
+  const trackProps = useSlotProps({
+    elementType: Track,
+    externalSlotProps: componentsProps.track,
+    additionalProps: {
+      style: _extends({}, axisProps[axis].offset(trackOffset), axisProps[axis].leap(trackLeap))
+    },
+    ownerState,
+    className: classes.track
+  });
   const Thumb = (_components$Thumb = components.Thumb) != null ? _components$Thumb : 'span';
-  const thumbProps = appendOwnerState(Thumb, componentsProps.thumb, ownerState);
+  const thumbProps = useSlotProps({
+    elementType: Thumb,
+    getSlotProps: getThumbProps,
+    externalSlotProps: componentsProps.thumb,
+    ownerState
+  });
   const ValueLabel = (_components$ValueLabe = components.ValueLabel) != null ? _components$ValueLabe : SliderValueLabelUnstyled;
-  const valueLabelProps = appendOwnerState(ValueLabel, componentsProps.valueLabel, ownerState);
+  const valueLabelProps = useSlotProps({
+    elementType: ValueLabel,
+    externalSlotProps: componentsProps.valueLabel,
+    ownerState
+  });
   const Mark = (_components$Mark = components.Mark) != null ? _components$Mark : 'span';
-  const markProps = appendOwnerState(Mark, componentsProps.mark, ownerState);
+  const markProps = useSlotProps({
+    elementType: Mark,
+    externalSlotProps: componentsProps.mark,
+    ownerState,
+    className: classes.mark
+  });
   const MarkLabel = (_components$MarkLabel = components.MarkLabel) != null ? _components$MarkLabel : 'span';
-  const markLabelProps = appendOwnerState(MarkLabel, componentsProps.markLabel, ownerState);
+  const markLabelProps = useSlotProps({
+    elementType: MarkLabel,
+    externalSlotProps: componentsProps.markLabel,
+    ownerState
+  });
   const Input = components.Input || 'input';
-  const inputProps = appendOwnerState(Input, componentsProps.input, ownerState);
-  const hiddenInputProps = getHiddenInputProps();
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, getRootProps({
-    onMouseDown
-  }), {
-    className: clsx(classes.root, rootProps.className, className),
-    children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps, {
-      className: clsx(classes.rail, railProps.className)
-    })), /*#__PURE__*/_jsx(Track, _extends({}, trackProps, {
-      className: clsx(classes.track, trackProps.className),
-      style: _extends({}, trackStyle, trackProps.style)
-    })), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
+  const inputProps = useSlotProps({
+    elementType: Input,
+    getSlotProps: getHiddenInputProps,
+    externalSlotProps: componentsProps.input,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+    children: [/*#__PURE__*/_jsx(Rail, _extends({}, railProps)), /*#__PURE__*/_jsx(Track, _extends({}, trackProps)), marks.filter(mark => mark.value >= min && mark.value <= max).map((mark, index) => {
       const percent = valueToPercent(mark.value, min, max);
@@ -168,3 +199,3 @@ const style = axisProps[axis].offset(percent);
           style: _extends({}, style, markProps.style),
-          className: clsx(classes.mark, markProps.className, markActive && classes.markActive)
+          className: clsx(markProps.className, markActive && classes.markActive)
         })), mark.label != null ? /*#__PURE__*/_jsx(MarkLabel, _extends({
@@ -196,9 +227,10 @@ "aria-hidden": true,
           children: /*#__PURE__*/_jsx(Thumb, _extends({
-            "data-index": index
-          }, thumbProps, getThumbProps(), {
-            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusVisible === index && classes.focusVisible),
+            "data-index": index,
+            "data-focusvisible": focusedThumbIndex === index
+          }, thumbProps, {
+            className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
               pointerEvents: disableSwap && active !== index ? 'none' : undefined
             }, thumbProps.style),
-            children: /*#__PURE__*/_jsx(Input, _extends({}, hiddenInputProps, {
+            children: /*#__PURE__*/_jsx(Input, _extends({
               "data-index": index,
@@ -209,7 +241,3 @@ "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel,
               value: values[index]
-            }, !isHostComponent(Input) && {
-              ownerState: _extends({}, ownerState, inputProps.ownerState)
-            }, inputProps, {
-              style: _extends({}, hiddenInputProps.style, inputProps.style)
-            }))
+            }, inputProps))
           }))
@@ -302,10 +330,10 @@ }))
   componentsProps: PropTypes.shape({
-    input: PropTypes.object,
-    mark: PropTypes.object,
-    markLabel: PropTypes.object,
-    rail: PropTypes.object,
-    root: PropTypes.object,
-    thumb: PropTypes.object,
-    track: PropTypes.object,
-    valueLabel: PropTypes.shape({
+    input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    mark: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    markLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    rail: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    thumb: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    track: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    valueLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
       children: PropTypes.element,
@@ -320,3 +348,3 @@ className: PropTypes.string,
       valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
-    })
+    })])
   }),
@@ -414,7 +442,2 @@
   /**
-   * @ignore
-   */
-  onMouseDown: PropTypes.func,
-
-  /**
    * The component orientation.
@@ -421,0 +444,0 @@ * @default 'horizontal'

SliderUnstyled/SliderUnstyled.types.d.ts

 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '@mui/types';
 import React from 'react';
+import { SlotComponentProps } from '../utils';
 import { SliderUnstyledClasses } from './sliderUnstyledClasses';
@@ -8,2 +9,3 @@ import SliderValueLabelUnstyled from './SliderValueLabelUnstyled';
     disabled: boolean;
+    focusedThumbIndex: number;
     isRtl: boolean;
@@ -28,180 +30,181 @@ mark: boolean | Mark[];
 }
+interface SliderUnstyledOwnProps {
+    /**
+     * The label of the slider.
+     */
+    'aria-label'?: string;
+    /**
+     * The id of the element containing a label for the slider.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * A string value that provides a user-friendly name for the current value of the slider.
+     */
+    'aria-valuetext'?: string;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<SliderUnstyledClasses>;
+    /**
+     * The components used for each slot inside the Slider.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+        Root?: React.ElementType;
+        Track?: React.ElementType;
+        Rail?: React.ElementType;
+        Thumb?: React.ElementType;
+        Mark?: React.ElementType;
+        MarkLabel?: React.ElementType;
+        ValueLabel?: React.ElementType;
+        Input?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Slider.
+     * @default {}
+     */
+    componentsProps?: {
+        root?: SlotComponentProps<'span', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        track?: SlotComponentProps<'span', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        rail?: SlotComponentProps<'span', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        thumb?: SlotComponentProps<'span', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        mark?: SlotComponentProps<'span', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        markLabel?: SlotComponentProps<'span', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        valueLabel?: SlotComponentProps<typeof SliderValueLabelUnstyled, SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+        input?: SlotComponentProps<'input', SliderUnstyledComponentsPropsOverrides, SliderUnstyledOwnerState>;
+    };
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: number | number[];
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
+     * @default false
+     */
+    disableSwap?: boolean;
+    /**
+     * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
+     * This is important for screen reader users.
+     * @param {number} index The thumb label's index to format.
+     * @returns {string}
+     */
+    getAriaLabel?: (index: number) => string;
+    /**
+     * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
+     * This is important for screen reader users.
+     * @param {number} value The thumb label's value to format.
+     * @param {number} index The thumb label's index to format.
+     * @returns {string}
+     */
+    getAriaValueText?: (value: number, index: number) => string;
+    /**
+     * Indicates whether the theme context has rtl direction. It is set automatically.
+     * @default false
+     */
+    isRtl?: boolean;
+    /**
+     * Marks indicate predetermined values to which the user can move the slider.
+     * If `true` the marks are spaced according the value of the `step` prop.
+     * If an array, it should contain objects with `value` and an optional `label` keys.
+     * @default false
+     */
+    marks?: boolean | Mark[];
+    /**
+     * The maximum allowed value of the slider.
+     * Should not be equal to min.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The minimum allowed value of the slider.
+     * Should not be equal to max.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Name attribute of the hidden `input` element.
+     */
+    name?: string;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     *
+     * @param {Event} event The event source of the callback.
+     * You can pull out the new value by accessing `event.target.value` (any).
+     * **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     * @param {number} activeThumb Index of the currently moved thumb.
+     */
+    onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
+    /**
+     * Callback function that is fired when the `mouseup` is triggered.
+     *
+     * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {number | number[]} value The new value.
+     */
+    onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
+    /**
+     * The component orientation.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * A transformation function, to change the scale of the slider.
+     * @default (x) => x
+     */
+    scale?: (value: number) => number;
+    /**
+     * The granularity with which the slider can step through values. (A "discrete" slider.)
+     * The `min` prop serves as the origin for the valid values.
+     * We recommend (max - min) to be evenly divisible by the step.
+     *
+     * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
+     * @default 1
+     */
+    step?: number | null;
+    /**
+     * Tab index attribute of the hidden `input` element.
+     */
+    tabIndex?: number;
+    /**
+     * The track presentation:
+     *
+     * - `normal` the track will render a bar representing the slider value.
+     * - `inverted` the track will render a bar representing the remaining slider value.
+     * - `false` the track will render without a bar.
+     * @default 'normal'
+     */
+    track?: 'normal' | false | 'inverted';
+    /**
+     * The value of the slider.
+     * For ranged sliders, provide an array with two values.
+     */
+    value?: number | number[];
+    /**
+     * Controls when the value label is displayed:
+     *
+     * - `auto` the value label will display when the thumb is hovered or focused.
+     * - `on` will display persistently.
+     * - `off` will never display.
+     * @default 'off'
+     */
+    valueLabelDisplay?: 'on' | 'auto' | 'off';
+    /**
+     * The format function the value label's value.
+     *
+     * When a function is provided, it should have the following signature:
+     *
+     * - {number} value The value label's value to format
+     * - {number} index The value label's index to format
+     * @default (x) => x
+     */
+    valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
+}
 export interface SliderUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
-    props: P & {
-        /**
-         * The label of the slider.
-         */
-        'aria-label'?: string;
-        /**
-         * The id of the element containing a label for the slider.
-         */
-        'aria-labelledby'?: string;
-        /**
-         * A string value that provides a user-friendly name for the current value of the slider.
-         */
-        'aria-valuetext'?: string;
-        /**
-         * Override or extend the styles applied to the component.
-         */
-        classes?: Partial<SliderUnstyledClasses>;
-        /**
-         * The components used for each slot inside the Slider.
-         * Either a string to use a HTML element or a component.
-         * @default {}
-         */
-        components?: {
-            Root?: React.ElementType;
-            Track?: React.ElementType;
-            Rail?: React.ElementType;
-            Thumb?: React.ElementType;
-            Mark?: React.ElementType;
-            MarkLabel?: React.ElementType;
-            ValueLabel?: React.ElementType;
-            Input?: React.ElementType;
-        };
-        /**
-         * The props used for each slot inside the Slider.
-         * @default {}
-         */
-        componentsProps?: {
-            root?: React.ComponentPropsWithRef<'span'> & SliderUnstyledComponentsPropsOverrides;
-            track?: React.ComponentPropsWithRef<'span'> & SliderUnstyledComponentsPropsOverrides;
-            rail?: React.ComponentPropsWithRef<'span'> & SliderUnstyledComponentsPropsOverrides;
-            thumb?: React.ComponentPropsWithRef<'span'> & SliderUnstyledComponentsPropsOverrides;
-            mark?: React.ComponentPropsWithRef<'span'> & SliderUnstyledComponentsPropsOverrides;
-            markLabel?: React.ComponentPropsWithRef<'span'> & SliderUnstyledComponentsPropsOverrides;
-            valueLabel?: Partial<React.ComponentPropsWithRef<typeof SliderValueLabelUnstyled>> & SliderUnstyledComponentsPropsOverrides;
-            input?: React.ComponentPropsWithRef<'input'> & SliderUnstyledComponentsPropsOverrides;
-        };
-        /**
-         * The default value. Use when the component is not controlled.
-         */
-        defaultValue?: number | number[];
-        /**
-         * If `true`, the component is disabled.
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
-         * @default false
-         */
-        disableSwap?: boolean;
-        /**
-         * Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.
-         * This is important for screen reader users.
-         * @param {number} index The thumb label's index to format.
-         * @returns {string}
-         */
-        getAriaLabel?: (index: number) => string;
-        /**
-         * Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.
-         * This is important for screen reader users.
-         * @param {number} value The thumb label's value to format.
-         * @param {number} index The thumb label's index to format.
-         * @returns {string}
-         */
-        getAriaValueText?: (value: number, index: number) => string;
-        /**
-         * Indicates whether the theme context has rtl direction. It is set automatically.
-         * @default false
-         */
-        isRtl?: boolean;
-        /**
-         * Marks indicate predetermined values to which the user can move the slider.
-         * If `true` the marks are spaced according the value of the `step` prop.
-         * If an array, it should contain objects with `value` and an optional `label` keys.
-         * @default false
-         */
-        marks?: boolean | Mark[];
-        /**
-         * The maximum allowed value of the slider.
-         * Should not be equal to min.
-         * @default 100
-         */
-        max?: number;
-        /**
-         * The minimum allowed value of the slider.
-         * Should not be equal to max.
-         * @default 0
-         */
-        min?: number;
-        /**
-         * Name attribute of the hidden `input` element.
-         */
-        name?: string;
-        /**
-         * Callback function that is fired when the slider's value changed.
-         *
-         * @param {Event} event The event source of the callback.
-         * You can pull out the new value by accessing `event.target.value` (any).
-         * **Warning**: This is a generic event not a change event.
-         * @param {number | number[]} value The new value.
-         * @param {number} activeThumb Index of the currently moved thumb.
-         */
-        onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
-        /**
-         * Callback function that is fired when the `mouseup` is triggered.
-         *
-         * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
-         * @param {number | number[]} value The new value.
-         */
-        onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
-        /**
-         * The component orientation.
-         * @default 'horizontal'
-         */
-        orientation?: 'horizontal' | 'vertical';
-        /**
-         * A transformation function, to change the scale of the slider.
-         * @default (x) => x
-         */
-        scale?: (value: number) => number;
-        /**
-         * The granularity with which the slider can step through values. (A "discrete" slider.)
-         * The `min` prop serves as the origin for the valid values.
-         * We recommend (max - min) to be evenly divisible by the step.
-         *
-         * When step is `null`, the thumb can only be slid onto marks provided with the `marks` prop.
-         * @default 1
-         */
-        step?: number | null;
-        /**
-         * Tab index attribute of the hidden `input` element.
-         */
-        tabIndex?: number;
-        /**
-         * The track presentation:
-         *
-         * - `normal` the track will render a bar representing the slider value.
-         * - `inverted` the track will render a bar representing the remaining slider value.
-         * - `false` the track will render without a bar.
-         * @default 'normal'
-         */
-        track?: 'normal' | false | 'inverted';
-        /**
-         * The value of the slider.
-         * For ranged sliders, provide an array with two values.
-         */
-        value?: number | number[];
-        /**
-         * Controls when the value label is displayed:
-         *
-         * - `auto` the value label will display when the thumb is hovered or focused.
-         * - `on` will display persistently.
-         * - `off` will never display.
-         * @default 'off'
-         */
-        valueLabelDisplay?: 'on' | 'auto' | 'off';
-        /**
-         * The format function the value label's value.
-         *
-         * When a function is provided, it should have the following signature:
-         *
-         * - {number} value The value label's value to format
-         * - {number} index The value label's index to format
-         * @default (x) => x
-         */
-        valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
-    };
+    props: P & SliderUnstyledOwnProps;
     defaultComponent: D;
@@ -234,2 +237,3 @@ }
     'data-index': number;
+    'data-focusvisible': boolean;
     children: React.ReactNode;
@@ -275,1 +279,2 @@ className?: string;
 };
+export {};

SliderUnstyled/sliderUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface SliderUnstyledClasses {

SliderUnstyled/useSlider.d.ts

@@ -35,3 +35,3 @@ import { Mark, UseSliderHiddenInputProps, UseSliderParameters, UseSliderRootSlotProps, UseSliderThumbSlotProps } from './useSlider.types';
     dragging: boolean;
-    focusVisible: number;
+    focusedThumbIndex: number;
     getHiddenInputProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderHiddenInputProps<TOther>;
@@ -38,0 +38,0 @@ getRootProps: <TOther_1 extends EventHandlers = {}>(otherHandlers?: TOther_1) => UseSliderRootSlotProps<TOther_1>;

SliderUnstyled/useSlider.js

@@ -236,3 +236,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
   } = useIsFocusVisible();
-  const [focusVisible, setFocusVisible] = React.useState(-1);
+  const [focusedThumbIndex, setFocusedThumbIndex] = React.useState(-1);
   const sliderRef = React.useRef();
@@ -249,3 +249,3 @@ const handleFocusRef = useForkRef(focusVisibleRef, sliderRef);
     if (isFocusVisibleRef.current === true) {
-      setFocusVisible(index);
+      setFocusedThumbIndex(index);
     }
@@ -263,3 +263,3 @@
     if (isFocusVisibleRef.current === false) {
-      setFocusVisible(-1);
+      setFocusedThumbIndex(-1);
     }
@@ -287,4 +287,4 @@
 
-  if (disabled && focusVisible !== -1) {
-    setFocusVisible(-1);
+  if (disabled && focusedThumbIndex !== -1) {
+    setFocusedThumbIndex(-1);
   }
@@ -338,3 +338,3 @@
     setValueState(newValue);
-    setFocusVisible(index);
+    setFocusedThumbIndex(index);
 
@@ -650,9 +650,8 @@ if (handleChange) {
     };
-
-    const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
-
-    return _extends({}, mergedEventHandlers);
+    return _extends({}, otherHandlers, ownEventHandlers);
   };
 
   const getHiddenInputProps = (otherHandlers = {}) => {
+    var _parameters$step;
+
     const ownEventHandlers = {
@@ -676,3 +675,3 @@ onChange: createHandleHiddenInputChange(otherHandlers || {}),
       max: parameters.max,
-      step: parameters.step,
+      step: (_parameters$step = parameters.step) != null ? _parameters$step : undefined,
       disabled
@@ -694,3 +693,3 @@ }, mergedEventHandlers, {
     dragging,
-    focusVisible,
+    focusedThumbIndex,
     getHiddenInputProps,
@@ -697,0 +696,0 @@ getRootProps,

SliderUnstyled/useSlider.types.d.ts

@@ -45,3 +45,3 @@ import React from 'react';
     onFocus: React.FocusEventHandler;
-    step?: number | null;
+    step?: number;
     style: React.CSSProperties;
@@ -48,0 +48,0 @@ tabIndex?: number;

SwitchUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './SwitchUnstyled';

SwitchUnstyled/SwitchUnstyled.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

SwitchUnstyled/SwitchUnstyled.types.d.ts

@@ -48,3 +48,3 @@ /// <reference types="react" />
     ownerState: SwitchUnstyledOwnerState;
-    className: string;
+    className?: string;
     children?: React.ReactNode;
@@ -54,3 +54,3 @@ };
     ownerState: SwitchUnstyledOwnerState;
-    className: string;
+    className?: string;
     children?: React.ReactNode;
@@ -60,3 +60,3 @@ };
     ownerState: SwitchUnstyledOwnerState;
-    className: string;
+    className?: string;
     children?: React.ReactNode;
@@ -66,4 +66,4 @@ };
     ownerState: SwitchUnstyledOwnerState;
-    className: string;
+    className?: string;
     children?: React.ReactNode;
 }>;

SwitchUnstyled/switchUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface SwitchUnstyledClasses {

SwitchUnstyled/useSwitch.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

SwitchUnstyled/useSwitch.types.d.ts

@@ -0,0 +0,0 @@ import React, { HTMLInputTypeAttribute } from 'react';

TablePaginationUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TablePaginationUnstyled';

TablePaginationUnstyled/TablePaginationActionsUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

TablePaginationUnstyled/TablePaginationActionsUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TablePaginationUnstyled/TablePaginationUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

TablePaginationUnstyled/TablePaginationUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TablePaginationUnstyled/tablePaginationUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface TablePaginationUnstyledClasses {

TabPanelUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TabPanelUnstyled';

TabPanelUnstyled/TabPanelUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

TabPanelUnstyled/TabPanelUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TabPanelUnstyled/tabPanelUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabPanelUnstyledClasses {

TabPanelUnstyled/useTabPanel.d.ts

@@ -0,0 +0,0 @@ import { UseTabPanelParameters } from './useTabPanel.types';

TabPanelUnstyled/useTabPanel.types.d.ts

@@ -0,0 +0,0 @@ export interface UseTabPanelParameters {

TabsListUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TabsListUnstyled';

TabsListUnstyled/TabsListUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

TabsListUnstyled/TabsListUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

TabsListUnstyled/tabsListUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabsListUnstyledClasses {

TabsListUnstyled/useTabsList.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TabsListUnstyled/useTabsList.types.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TabsUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TabsUnstyled';

TabsUnstyled/TabsContext.d.ts

@@ -0,0 +0,0 @@ import * as React from 'react';

TabsUnstyled/TabsUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

TabsUnstyled/TabsUnstyled.types.d.ts

@@ -50,3 +50,3 @@ import React from 'react';
      */
-    onChange?: (event: React.SyntheticEvent, value: number | string) => void;
+    onChange?: (event: React.SyntheticEvent, value: number | string | boolean) => void;
     /**
@@ -53,0 +53,0 @@ * If `true` the selected tab changes on focus. Otherwise it only

TabsUnstyled/tabsUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabsUnstyledClasses {

TabsUnstyled/useTabs.d.ts

@@ -25,3 +25,3 @@ import * as React from 'react';
      */
-    onChange?: (event: React.SyntheticEvent, value: number | string) => void;
+    onChange?: (event: React.SyntheticEvent, value: number | string | boolean) => void;
     /**
@@ -37,3 +37,3 @@ * If `true` the selected tab changes on focus. Otherwise it only
         value: string | number | false;
-        onSelected: (e: any, newValue: any) => void;
+        onSelected: (e: React.SyntheticEvent, newValue: string | number | false) => void;
         orientation: "horizontal" | "vertical" | undefined;
@@ -40,0 +40,0 @@ direction: "ltr" | "rtl" | undefined;

TabUnstyled/index.d.ts

@@ -0,0 +0,0 @@ export { default } from './TabUnstyled';

TabUnstyled/TabUnstyled.d.ts

@@ -0,0 +0,0 @@ import { OverridableComponent } from '@mui/types';

TabUnstyled/TabUnstyled.types.d.ts

@@ -0,0 +0,0 @@ import { OverrideProps, Simplify } from '@mui/types';

TabUnstyled/tabUnstyledClasses.d.ts

@@ -0,0 +0,0 @@ export interface TabUnstyledClasses {

TabUnstyled/useTab.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

TabUnstyled/useTab.types.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

TextareaAutosize/TextareaAutosize.js

@@ -6,2 +6,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
+import { flushSync } from 'react-dom';
 import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
@@ -30,2 +31,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 };
+
+function isEmpty(obj) {
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
+}
+
 const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, ref) {
@@ -49,3 +55,3 @@ const {
   const [state, setState] = React.useState({});
-  const syncHeight = React.useCallback(() => {
+  const getUpdatedState = React.useCallback(() => {
     const input = inputRef.current;
@@ -56,3 +62,3 @@ const containerWindow = ownerWindow(input);
     if (computedStyle.width === '0px') {
-      return;
+      return {};
     }
@@ -94,26 +100,73 @@
     const overflow = Math.abs(outerHeight - innerHeight) <= 1;
-    setState(prevState => {
-      // Need a large enough difference to update the height.
-      // This prevents infinite rendering loop.
-      if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
-        renders.current += 1;
-        return {
-          overflow,
-          outerHeightStyle
-        };
-      }
+    return {
+      outerHeightStyle,
+      overflow
+    };
+  }, [maxRows, minRows, props.placeholder]);
 
-      if (process.env.NODE_ENV !== 'production') {
-        if (renders.current === 20) {
-          console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
-        }
+  const updateState = (prevState, newState) => {
+    const {
+      outerHeightStyle,
+      overflow
+    } = newState; // Need a large enough difference to update the height.
+    // This prevents infinite rendering loop.
+
+    if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+      renders.current += 1;
+      return {
+        overflow,
+        outerHeightStyle
+      };
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (renders.current === 20) {
+        console.error(['MUI: Too many re-renders. The layout is unstable.', 'TextareaAutosize limits the number of renders to prevent an infinite loop.'].join('\n'));
       }
+    }
 
-      return prevState;
+    return prevState;
+  };
+
+  const syncHeight = React.useCallback(() => {
+    const newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    }
+
+    setState(prevState => {
+      return updateState(prevState, newState);
     });
-  }, [maxRows, minRows, props.placeholder]);
+  }, [getUpdatedState]);
+
+  const syncHeightWithFlushSycn = () => {
+    const newState = getUpdatedState();
+
+    if (isEmpty(newState)) {
+      return;
+    } // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+    // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+    // Related issue - https://github.com/facebook/react/issues/24331
+
+
+    flushSync(() => {
+      setState(prevState => {
+        return updateState(prevState, newState);
+      });
+    });
+  };
+
   React.useEffect(() => {
     const handleResize = debounce(() => {
-      renders.current = 0;
-      syncHeight();
+      renders.current = 0; // If the TextareaAutosize component is replaced by Suspense with a fallback, the last
+      // ResizeObserver's handler that runs because of the change in the layout is trying to
+      // access a dom node that is no longer there (as the fallback component is being shown instead).
+      // See https://github.com/mui/material-ui/issues/32640
+      // TODO: Add tests that will ensure the component is not failing when
+      // replaced by Suspense with a fallback, once React is updated to version 18
+
+      if (inputRef.current) {
+        syncHeightWithFlushSycn();
+      }
     });
@@ -137,3 +190,3 @@ const containerWindow = ownerWindow(inputRef.current);
     };
-  }, [syncHeight]);
+  });
   useEnhancedEffect(() => {
@@ -140,0 +193,0 @@ syncHeight();

utils/appendOwnerState.d.ts

@@ -1,11 +0,20 @@
-/// <reference types="react" />
+import { Simplify } from '@mui/types';
+import React from 'react';
 /**
+ * Type of the ownerState based on the type of an element it applies to.
+ * This resolves to the provided OwnerState for React components and `undefined` for host components.
+ * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+ */
+declare type OwnerStateWhenApplicable<ElementType extends React.ElementType, OwnerState> = ElementType extends React.ComponentType<any> ? OwnerState : ElementType extends keyof JSX.IntrinsicElements ? undefined : OwnerState | undefined;
+export declare type AppendOwnerStateReturnType<ElementType extends React.ElementType, OtherProps, OwnerState> = Simplify<OtherProps & {
+    ownerState: OwnerStateWhenApplicable<ElementType, OwnerState>;
+}>;
+/**
  * Appends the ownerState object to the props, merging with the existing one if necessary.
  *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
- * @param existingProps Props of the element.
+ * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+ * @param otherProps Props of the element.
  * @param ownerState
  */
-export default function appendOwnerState<TExistingProps extends Record<string, any>, TOwnerState extends {}>(elementType: React.ElementType, existingProps: TExistingProps | undefined, ownerState: TOwnerState): TExistingProps & {
-    ownerState?: TOwnerState;
-};
+export default function appendOwnerState<ElementType extends React.ElementType, OtherProps extends Record<string, any>, OwnerState>(elementType: ElementType, otherProps: OtherProps | undefined, ownerState: OwnerState): AppendOwnerStateReturnType<ElementType, OtherProps, OwnerState>;
+export {};

utils/appendOwnerState.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import isHostComponent from './isHostComponent';
 /**
+ * Type of the ownerState based on the type of an element it applies to.
+ * This resolves to the provided OwnerState for React components and `undefined` for host components.
+ * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
+ */
+
+/**
  * Appends the ownerState object to the props, merging with the existing one if necessary.
  *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` are not applied.
- * @param existingProps Props of the element.
+ * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node, `ownerState` is not applied.
+ * @param otherProps Props of the element.
  * @param ownerState
  */
-
-export default function appendOwnerState(elementType, existingProps = {}, ownerState) {
+export default function appendOwnerState(elementType, otherProps = {}, ownerState) {
   if (isHostComponent(elementType)) {
-    return existingProps;
+    return otherProps;
   }
 
-  return _extends({}, existingProps, {
-    ownerState: _extends({}, existingProps.ownerState, ownerState)
+  return _extends({}, otherProps, {
+    ownerState: _extends({}, otherProps.ownerState, ownerState)
   });
 }

utils/areArraysEqual.d.ts

 declare type ItemComparer<T> = (a: T, b: T) => boolean;
 export default function areArraysEqual<T>(array1: T[], array2: T[], itemComparer?: ItemComparer<T>): boolean;
 export {};

utils/extractEventHandlers.d.ts

@@ -0,0 +0,0 @@ import { EventHandlers } from './types';

utils/index.d.ts

@@ -5,3 +5,4 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as isHostComponent } from './isHostComponent';
+export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export * from './types';

utils/index.js

@@ -5,3 +5,4 @@ export { default as appendOwnerState } from './appendOwnerState';
 export { default as isHostComponent } from './isHostComponent';
+export { default as resolveComponentProps } from './resolveComponentProps';
 export { default as useSlotProps } from './useSlotProps';
 export * from './types';

utils/isHostComponent.d.ts

@@ -0,0 +0,0 @@ import React from 'react';

utils/mergeSlotProps.d.ts

@@ -6,6 +6,5 @@ /// <reference types="react" />
 import { OmitEventHandlers } from './omitEventHandlers';
-export declare type WithClassName<T> = T & {
+export declare type WithCommonProps<T> = T & {
     className?: string;
-};
-export declare type WithRef<T> = T & {
+    style?: React.CSSProperties;
     ref?: React.Ref<any>;
@@ -19,7 +18,7 @@ };
      */
-    getSlotProps?: (other: EventHandlers) => WithClassName<SlotProps>;
+    getSlotProps?: (other: EventHandlers) => WithCommonProps<SlotProps>;
     /**
      * Props provided to the `componentsProps.*` of the unstyled component.
      */
-    externalSlotProps?: WithClassName<ExternalSlotProps>;
+    externalSlotProps?: WithCommonProps<ExternalSlotProps>;
     /**
@@ -29,7 +28,7 @@ * Extra props placed on the unstyled component that should be forwarded to the slot.
      */
-    externalForwardedProps?: WithClassName<ExternalForwardedProps>;
+    externalForwardedProps?: WithCommonProps<ExternalForwardedProps>;
     /**
      * Additional props to be placed on the slot.
      */
-    additionalProps?: WithClassName<AdditionalProps>;
+    additionalProps?: WithCommonProps<AdditionalProps>;
     /**
@@ -43,2 +42,3 @@ * Extra class name(s) to be placed on the slot.
         className?: string;
+        style?: React.CSSProperties;
     }>;
@@ -60,2 +60,2 @@ internalRef: React.Ref<any> | undefined;
  */
-export default function mergeSlotProps<SlotProps, ExternalForwardedProps extends Record<string, unknown>, ExternalSlotProps extends Record<string, unknown>, AdditionalProps>(parameters: MergeSlotPropsParameters<WithRef<SlotProps>, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>): MergeSlotPropsResult<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>;
+export default function mergeSlotProps<SlotProps, ExternalForwardedProps extends Record<string, unknown>, ExternalSlotProps extends Record<string, unknown>, AdditionalProps>(parameters: MergeSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>): MergeSlotPropsResult<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>;

utils/mergeSlotProps.js

@@ -33,10 +33,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
-    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps, {
-      className: joinedClasses
-    });
+    const mergedStyle = _extends({}, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
 
-    if (joinedClasses.length === 0) {
-      delete props.className;
+    const props = _extends({}, additionalProps, externalForwardedProps, externalSlotProps);
+
+    if (joinedClasses.length > 0) {
+      props.className = joinedClasses;
     }
 
+    if (Object.keys(mergedStyle).length > 0) {
+      props.style = mergedStyle;
+    }
+
     return {
@@ -56,10 +60,14 @@ props,
 
-  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers, {
-    className: joinedClasses
-  });
+  const mergedStyle = _extends({}, internalSlotProps == null ? void 0 : internalSlotProps.style, additionalProps == null ? void 0 : additionalProps.style, externalForwardedProps == null ? void 0 : externalForwardedProps.style, externalSlotProps == null ? void 0 : externalSlotProps.style);
 
-  if (joinedClasses.length === 0) {
-    delete props.className;
+  const props = _extends({}, internalSlotProps, additionalProps, otherPropsWithoutEventHandlers, componentsPropsWithoutEventHandlers);
+
+  if (joinedClasses.length > 0) {
+    props.className = joinedClasses;
   }
 
+  if (Object.keys(mergedStyle).length > 0) {
+    props.style = mergedStyle;
+  }
+
   return {
@@ -66,0 +74,0 @@ props,

utils/omitEventHandlers.d.ts

@@ -0,0 +0,0 @@ import { Simplify } from '@mui/types';

utils/resolveComponentProps.d.ts

@@ -0,0 +0,0 @@ /**

utils/types.d.ts

@@ -0,0 +0,0 @@ /// <reference types="react" />

utils/useSlotProps.d.ts

 import * as React from 'react';
-import { MergeSlotPropsParameters, WithRef } from './mergeSlotProps';
-export declare type UseSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps, OwnerState> = Omit<MergeSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>, 'externalSlotProps'> & {
+import { AppendOwnerStateReturnType } from './appendOwnerState';
+import { MergeSlotPropsParameters, WithCommonProps } from './mergeSlotProps';
+export declare type UseSlotPropsParameters<ElementType extends React.ElementType, SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps, OwnerState> = Omit<MergeSlotPropsParameters<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps>, 'externalSlotProps'> & {
     /**
      * The type of the component used in the slot.
      */
-    elementType: React.ElementType;
+    elementType: ElementType;
     /**
@@ -17,7 +18,6 @@ * The `componentsProps.*` of the unstyled component.
 };
-export declare type UseSlotPropsResult<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps, OwnerState> = Omit<SlotProps & ExternalSlotProps & ExternalForwardedProps & AdditionalProps, 'ref'> & {
+export declare type UseSlotPropsResult<ElementType extends React.ElementType, SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps, OwnerState> = AppendOwnerStateReturnType<ElementType, Omit<SlotProps & ExternalSlotProps & ExternalForwardedProps & AdditionalProps, 'ref'> & {
     className?: string | undefined;
-    ownerState?: OwnerState | undefined;
     ref: (instance: any | null) => void;
-};
+}, OwnerState>;
 /**
@@ -30,10 +30,13 @@ * Builds the props to be passed into the slot of an unstyled component.
  */
-export default function useSlotProps<SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps, OwnerState>(parameters: UseSlotPropsParameters<SlotProps, ExternalForwardedProps, WithRef<ExternalSlotProps>, WithRef<AdditionalProps>, OwnerState>): import("@mui/types").Simplify<SlotProps & import("./omitEventHandlers").OmitEventHandlers<Record<string, unknown>> & import("./omitEventHandlers").OmitEventHandlers<WithRef<ExternalSlotProps>> & AdditionalProps & {
+export default function useSlotProps<ElementType extends React.ElementType, SlotProps, ExternalForwardedProps, ExternalSlotProps, AdditionalProps, OwnerState>(parameters: UseSlotPropsParameters<ElementType, SlotProps, ExternalForwardedProps, WithCommonProps<ExternalSlotProps>, WithCommonProps<AdditionalProps>, OwnerState>): import("@mui/types").Simplify<import("@mui/types").Simplify<SlotProps & import("./omitEventHandlers").OmitEventHandlers<Record<string, unknown>> & AdditionalProps & {
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
     ref?: React.Ref<any> | undefined;
 } & {
     className?: string | undefined;
+    style?: React.CSSProperties | undefined;
 }> & {
     ref: React.Ref<any>;
 } & {
-    ownerState?: OwnerState | undefined;
-};
+    ownerState: ElementType extends React.ComponentType<any> ? OwnerState : ElementType extends keyof JSX.IntrinsicElements ? undefined : OwnerState | undefined;
+}>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2093381

increased by1.07%

Lines of code

41981

increased by0.9%

Dependency changes

• Updated@mui/utils@^5.8.6