@mui/material 9.0.0-beta.0 → 9.0.0

package/Slide/Slide.d.ts

@@ -47,17 +47,17 @@ export interface SlideProps extends TransitionProps {
 }
 
 /**
- * The Slide transition is used by the [Drawer](https://next.mui.com/material-ui/react-drawer/) component.
+ * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *
- * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
- * - [Transitions](https://next.mui.com/material-ui/transitions/)
+ * - [Dialog](https://mui.com/material-ui/react-dialog/)
+ * - [Transitions](https://mui.com/material-ui/transitions/)
  *
  * API:
  *
- * - [Slide API](https://next.mui.com/material-ui/api/slide/)
+ * - [Slide API](https://mui.com/material-ui/api/slide/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
 export default function Slide(props: SlideProps): React.JSX.Element;

package/Slide/Slide.js

@@ -22,19 +22,30 @@ var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
+const hiddenStyles = {
+  visibility: 'hidden'
+};
+
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
 function getTranslateValue(direction, node, resolvedContainer) {
-  const rect = node.getBoundingClientRect();
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = (0, _utils2.ownerWindow)(node);
-  let transform;
-  if (node.fakeTransform) {
-    transform = node.fakeTransform;
-  } else {
-    const computedStyle = containerWindow.getComputedStyle(node);
-    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-  }
+
+  // Clear the inline transform and transition before reading layout and computed
+  // style so we compute from the element's natural position, not its previous
+  // off-screen translation. The transition must also be cleared, otherwise the
+  // browser may report an animated intermediate value from a still-running
+  // enter transition when reading getComputedStyle during exit.
+  const previousTransform = node.style.transform;
+  const previousTransition = node.style.transition;
+  node.style.transition = '';
+  node.style.transform = '';
+  const rect = node.getBoundingClientRect();
+  const computedStyle = containerWindow.getComputedStyle(node);
+  const transform = computedStyle.getPropertyValue('transform');
+  node.style.transform = previousTransform;
+  node.style.transition = previousTransition;
   let offsetX = 0;
   let offsetY = 0;
   if (transform && transform !== 'none' && typeof transform === 'string') {
@@ -74,7 +85,6 @@ function setTranslateValue(direction, node, containerProp) {
   const resolvedContainer = resolveContainer(containerProp);
   const transform = getTranslateValue(direction, node, resolvedContainer);
   if (transform) {
-    node.style.webkitTransform = transform;
     node.style.transform = transform;
   }
 }
@@ -109,30 +119,18 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = _reactTransitionGroup.Transition,
     ...other
   } = props;
   const childrenRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
-  const normalizedTransitionCallback = callback => isAppearing => {
-    if (callback) {
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (isAppearing === undefined) {
-        callback(childrenRef.current);
-      } else {
-        callback(childrenRef.current, isAppearing);
-      }
-    }
-  };
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEnter = (0, _utils.normalizedTransitionCallback)(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
     (0, _utils.reflow)(node);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = (0, _utils.normalizedTransitionCallback)(childrenRef, (node, isAppearing) => {
     const transitionProps = (0, _utils.getTransitionProps)({
       timeout,
       style,
@@ -140,21 +138,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-      ...transitionProps
-    });
-    node.style.transition = theme.transitions.create('transform', {
-      ...transitionProps
-    });
-    node.style.webkitTransform = 'none';
+    node.style.transition = theme.transitions.create('transform', transitionProps);
     node.style.transform = 'none';
     if (onEntering) {
       onEntering(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = (0, _utils.normalizedTransitionCallback)(childrenRef, onEntered);
+  const handleExiting = (0, _utils.normalizedTransitionCallback)(childrenRef, onExiting);
+  const handleExit = (0, _utils.normalizedTransitionCallback)(childrenRef, node => {
     const transitionProps = (0, _utils.getTransitionProps)({
       timeout,
       style,
@@ -162,16 +154,14 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     setTranslateValue(direction, node, containerProp);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(node => {
+  const handleExited = (0, _utils.normalizedTransitionCallback)(childrenRef, node => {
     // No need for transitions when the component is hidden
-    node.style.webkitTransition = '';
     node.style.transition = '';
     if (onExited) {
       onExited(node);
@@ -212,7 +202,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -229,13 +219,24 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
-      return /*#__PURE__*/React.cloneElement(children, {
-        ref: handleRef,
-        style: {
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+      let childStyle;
+      if (state === 'exited' && !inProp) {
+        childStyle = style || children.props.style ? {
+          visibility: 'hidden',
+          ...style,
+          ...children.props.style
+        } : hiddenStyles;
+      } else if (style && children.props.style) {
+        childStyle = {
           ...style,
           ...children.props.style
-        },
+        };
+      } else {
+        childStyle = style || children.props.style;
+      }
+      return /*#__PURE__*/React.cloneElement(children, {
+        ref: handleRef,
+        style: childStyle,
         ...restChildProps
       });
     }

package/Slide/Slide.mjs

@@ -11,23 +11,33 @@ import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import debounce from "../utils/debounce.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
-import { reflow, getTransitionProps } from "../transitions/utils.mjs";
+import { normalizedTransitionCallback, reflow, getTransitionProps } from "../transitions/utils.mjs";
 import { ownerWindow } from "../utils/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const hiddenStyles = {
+  visibility: 'hidden'
+};
 
 // Translate the node so it can't be seen on the screen.
 // Later, we're going to translate the node back to its original location with `none`.
-import { jsx as _jsx } from "react/jsx-runtime";
 function getTranslateValue(direction, node, resolvedContainer) {
-  const rect = node.getBoundingClientRect();
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = ownerWindow(node);
-  let transform;
-  if (node.fakeTransform) {
-    transform = node.fakeTransform;
-  } else {
-    const computedStyle = containerWindow.getComputedStyle(node);
-    transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');
-  }
+
+  // Clear the inline transform and transition before reading layout and computed
+  // style so we compute from the element's natural position, not its previous
+  // off-screen translation. The transition must also be cleared, otherwise the
+  // browser may report an animated intermediate value from a still-running
+  // enter transition when reading getComputedStyle during exit.
+  const previousTransform = node.style.transform;
+  const previousTransition = node.style.transition;
+  node.style.transition = '';
+  node.style.transform = '';
+  const rect = node.getBoundingClientRect();
+  const computedStyle = containerWindow.getComputedStyle(node);
+  const transform = computedStyle.getPropertyValue('transform');
+  node.style.transform = previousTransform;
+  node.style.transition = previousTransition;
   let offsetX = 0;
   let offsetY = 0;
   if (transform && transform !== 'none' && typeof transform === 'string') {
@@ -67,7 +77,6 @@ export function setTranslateValue(direction, node, containerProp) {
   const resolvedContainer = resolveContainer(containerProp);
   const transform = getTranslateValue(direction, node, resolvedContainer);
   if (transform) {
-    node.style.webkitTransform = transform;
     node.style.transform = transform;
   }
 }
@@ -102,30 +111,18 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const childrenRef = React.useRef(null);
   const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
-  const normalizedTransitionCallback = callback => isAppearing => {
-    if (callback) {
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (isAppearing === undefined) {
-        callback(childrenRef.current);
-      } else {
-        callback(childrenRef.current, isAppearing);
-      }
-    }
-  };
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEnter = normalizedTransitionCallback(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
     reflow(node);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntering = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(childrenRef, (node, isAppearing) => {
     const transitionProps = getTransitionProps({
       timeout,
       style,
@@ -133,21 +130,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', {
-      ...transitionProps
-    });
-    node.style.transition = theme.transitions.create('transform', {
-      ...transitionProps
-    });
-    node.style.webkitTransform = 'none';
+    node.style.transition = theme.transitions.create('transform', transitionProps);
     node.style.transform = 'none';
     if (onEntering) {
       onEntering(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = normalizedTransitionCallback(childrenRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(childrenRef, onExiting);
+  const handleExit = normalizedTransitionCallback(childrenRef, node => {
     const transitionProps = getTransitionProps({
       timeout,
       style,
@@ -155,16 +146,14 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('-webkit-transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     setTranslateValue(direction, node, containerProp);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(node => {
+  const handleExited = normalizedTransitionCallback(childrenRef, node => {
     // No need for transitions when the component is hidden
-    node.style.webkitTransition = '';
     node.style.transition = '';
     if (onExited) {
       onExited(node);
@@ -205,7 +194,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -222,13 +211,24 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
-      return /*#__PURE__*/React.cloneElement(children, {
-        ref: handleRef,
-        style: {
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+      let childStyle;
+      if (state === 'exited' && !inProp) {
+        childStyle = style || children.props.style ? {
+          visibility: 'hidden',
+          ...style,
+          ...children.props.style
+        } : hiddenStyles;
+      } else if (style && children.props.style) {
+        childStyle = {
           ...style,
           ...children.props.style
-        },
+        };
+      } else {
+        childStyle = style || children.props.style;
+      }
+      return /*#__PURE__*/React.cloneElement(children, {
+        ref: handleRef,
+        style: childStyle,
         ...restChildProps
       });
     }

package/Slider/Slider.d.mts

@@ -92,7 +92,7 @@ export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<SliderSlots, {
   markLabel: SlotProps<'span', SliderMarkLabelSlotPropsOverrides, SliderOwnerState>;
   /**
    * Props forwarded to the value label slot.
-   * By default, the available props are based on the [SliderValueLabel](https://next.mui.com/material-ui/api/slider/) component.
+   * By default, the available props are based on the [SliderValueLabel](https://mui.com/material-ui/api/slider/) component.
    */
   valueLabel: SlotComponentProps<typeof SliderValueLabelComponent, SliderValueLabelSlotPropsOverrides, SliderOwnerState>;
   /**
@@ -197,7 +197,7 @@ export interface SliderOwnProps<Value extends number | readonly number[]> {
    */
   onChange?: ((event: Event, value: Value, activeThumb: number) => void) | undefined;
   /**
-   * Callback function that is fired when the `mouseup` is triggered.
+   * Callback function that is fired when the pointer or touch interaction ends.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {Value} value The new value.
@@ -312,11 +312,11 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
  *
  * Demos:
  *
- * - [Slider](https://next.mui.com/material-ui/react-slider/)
+ * - [Slider](https://mui.com/material-ui/react-slider/)
  *
  * API:
  *
- * - [Slider API](https://next.mui.com/material-ui/api/slider/)
+ * - [Slider API](https://mui.com/material-ui/api/slider/)
  */
 declare const Slider: SliderType;
 export type SliderProps<RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'], AdditionalProps = {}, Value extends number | readonly number[] = number | number[]> = OverrideProps<SliderTypeMap<RootComponent, AdditionalProps, Value>, RootComponent> & {

package/Slider/Slider.d.ts

@@ -92,7 +92,7 @@ export type SliderSlotsAndSlotProps = CreateSlotsAndSlotProps<SliderSlots, {
   markLabel: SlotProps<'span', SliderMarkLabelSlotPropsOverrides, SliderOwnerState>;
   /**
    * Props forwarded to the value label slot.
-   * By default, the available props are based on the [SliderValueLabel](https://next.mui.com/material-ui/api/slider/) component.
+   * By default, the available props are based on the [SliderValueLabel](https://mui.com/material-ui/api/slider/) component.
    */
   valueLabel: SlotComponentProps<typeof SliderValueLabelComponent, SliderValueLabelSlotPropsOverrides, SliderOwnerState>;
   /**
@@ -197,7 +197,7 @@ export interface SliderOwnProps<Value extends number | readonly number[]> {
    */
   onChange?: ((event: Event, value: Value, activeThumb: number) => void) | undefined;
   /**
-   * Callback function that is fired when the `mouseup` is triggered.
+   * Callback function that is fired when the pointer or touch interaction ends.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {Value} value The new value.
@@ -312,11 +312,11 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
  *
  * Demos:
  *
- * - [Slider](https://next.mui.com/material-ui/react-slider/)
+ * - [Slider](https://mui.com/material-ui/react-slider/)
  *
  * API:
  *
- * - [Slider API](https://next.mui.com/material-ui/api/slider/)
+ * - [Slider API](https://mui.com/material-ui/api/slider/)
  */
 declare const Slider: SliderType;
 export type SliderProps<RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'], AdditionalProps = {}, Value extends number | readonly number[] = number | number[]> = OverrideProps<SliderTypeMap<RootComponent, AdditionalProps, Value>, RootComponent> & {

package/Slider/Slider.js

@@ -882,7 +882,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    */
   onChange: _propTypes.default.func,
   /**
-   * Callback function that is fired when the `mouseup` is triggered.
+   * Callback function that is fired when the pointer or touch interaction ends.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {Value} value The new value.

package/Slider/Slider.mjs

@@ -876,7 +876,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    */
   onChange: PropTypes.func,
   /**
-   * Callback function that is fired when the `mouseup` is triggered.
+   * Callback function that is fired when the pointer or touch interaction ends.
    *
    * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {Value} value The new value.

package/Slider/useSlider.d.mts

@@ -1,4 +1,4 @@
 import { UseSliderParameters, UseSliderReturnValue } from "./useSlider.types.mjs";
 export declare function valueToPercent(value: number, min: number, max: number): number;
-export declare const Identity: (x: any) => any;
+export declare const Identity: (x: number) => number;
 export declare function useSlider(parameters: UseSliderParameters): UseSliderReturnValue;

package/Slider/useSlider.d.ts

@@ -1,4 +1,4 @@
 import { UseSliderParameters, UseSliderReturnValue } from "./useSlider.types.js";
 export declare function valueToPercent(value: number, min: number, max: number): number;
-export declare const Identity: (x: any) => any;
+export declare const Identity: (x: number) => number;
 export declare function useSlider(parameters: UseSliderParameters): UseSliderReturnValue;