@mui/material 6.0.0-beta.0 → 6.0.0-beta.1

package/Slider/useSlider.types.d.ts

@@ -0,0 +1,228 @@
+import * as React from 'react';
+export interface UseSliderParameters {
+    /**
+     * The id of the element containing a label for the slider.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: number | ReadonlyArray<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;
+    /**
+     * If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
+     * @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 | ReadonlyArray<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';
+    /**
+     * The ref attached to the root of the Slider.
+     */
+    rootRef?: React.Ref<Element>;
+    /**
+     * A transformation function, to change the scale of the slider.
+     * @param {any} x
+     * @returns {any}
+     * @default function Identity(x) {
+     *   return x;
+     * }
+     */
+    scale?: (value: number) => number;
+    /**
+     * The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
+     * @default 10
+     */
+    shiftStep?: 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 value of the slider.
+     * For ranged sliders, provide an array with two values.
+     */
+    value?: number | ReadonlyArray<number>;
+}
+export interface Mark {
+    value: number;
+    label?: React.ReactNode;
+}
+export type UseSliderRootSlotOwnProps = {
+    onMouseDown: React.MouseEventHandler;
+    ref: React.RefCallback<Element> | null;
+};
+export type UseSliderRootSlotProps<ExternalProps = {}> = Omit<ExternalProps, keyof UseSliderRootSlotOwnProps> & UseSliderRootSlotOwnProps;
+export type UseSliderThumbSlotOwnProps = {
+    onMouseLeave: React.MouseEventHandler;
+    onMouseOver: React.MouseEventHandler;
+};
+export type UseSliderThumbSlotProps<ExternalProps = {}> = Omit<ExternalProps, keyof UseSliderThumbSlotOwnProps> & UseSliderThumbSlotOwnProps;
+export type UseSliderHiddenInputOwnProps = {
+    'aria-labelledby'?: string;
+    'aria-orientation'?: React.AriaAttributes['aria-orientation'];
+    'aria-valuemax'?: React.AriaAttributes['aria-valuemax'];
+    'aria-valuemin'?: React.AriaAttributes['aria-valuemin'];
+    disabled: boolean;
+    name?: string;
+    onBlur: React.FocusEventHandler;
+    onChange: React.ChangeEventHandler;
+    onFocus: React.FocusEventHandler;
+    step?: number | 'any';
+    style: React.CSSProperties;
+    tabIndex?: number;
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+};
+export type UseSliderHiddenInputProps<ExternalProps = {}> = Omit<ExternalProps, keyof UseSliderHiddenInputOwnProps> & UseSliderHiddenInputOwnProps;
+export type Axis = 'horizontal' | 'vertical' | 'horizontal-reverse';
+export interface AxisProps<T extends Axis> {
+    offset: (percent: number) => T extends 'horizontal' ? {
+        left: string;
+    } : T extends 'vertical' ? {
+        bottom: string;
+    } : T extends 'horizontal-reverse' ? {
+        right: string;
+    } : never;
+    leap: (percent: number) => T extends 'horizontal' | 'horizontal-reverse' ? {
+        width: string;
+    } : T extends 'vertical' ? {
+        height: string;
+    } : never;
+}
+export interface UseSliderReturnValue {
+    /**
+     * The active index of the slider.
+     */
+    active: number;
+    /**
+     * The orientation of the slider.
+     */
+    axis: Axis;
+    /**
+     * Returns the `offset` and `leap` methods to calculate the positioning styles based on the slider axis.
+     */
+    axisProps: {
+        [key in Axis]: AxisProps<key>;
+    };
+    /**
+     * If `true`, the slider is being dragged.
+     */
+    dragging: boolean;
+    /**
+     * The index of the thumb which is focused on the slider.
+     */
+    focusedThumbIndex: number;
+    /**
+     * Resolver for the hidden input slot's props.
+     * @param externalProps props for the hidden input slot
+     * @returns props that should be spread on the hidden input slot
+     */
+    getHiddenInputProps: <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>;
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderRootSlotProps<ExternalProps>;
+    /**
+     * Resolver for the thumb slot's props.
+     * @param externalProps props for the thumb slot
+     * @returns props that should be spread on the thumb slot
+     */
+    getThumbProps: <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderThumbSlotProps<ExternalProps>;
+    /**
+     * Resolver for the thumb slot's style prop.
+     * @param index of the currently moved thumb
+     * @returns props that should be spread on the style prop of thumb slot
+     */
+    getThumbStyle: (index: number) => object;
+    /**
+     * The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
+     */
+    marks: Mark[];
+    /**
+     * The thumb index for the current value when in hover state.
+     */
+    open: number;
+    /**
+     * If `true`, the slider is a range slider when the `value` prop passed is an array.
+     */
+    range: boolean;
+    /**
+     * Ref to the root slot's DOM node.
+     */
+    rootRef: React.RefCallback<Element> | null;
+    /**
+     * The track leap for the current value of the slider.
+     */
+    trackLeap: number;
+    /**
+     * The track offset for the current value of the slider.
+     */
+    trackOffset: number;
+    /**
+     * The possible values of the slider.
+     */
+    values: number[];
+}

package/Slider/useSlider.types.js

@@ -0,0 +1 @@
+export {};

package/Snackbar/Snackbar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener';
+import { ClickAwayListenerProps } from '../ClickAwayListener';
 import { Theme } from '../styles';
 import { InternalStandardProps as StandardProps } from '..';
 import { SnackbarContentProps } from '../SnackbarContent';

package/Snackbar/Snackbar.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { ClickAwayListener } from '@mui/base/ClickAwayListener';
-import { useSnackbar } from '@mui/base/useSnackbar';
+import useSlotProps from '@mui/utils/useSlotProps';
+import useSnackbar from './useSnackbar';
+import ClickAwayListener from '../ClickAwayListener';
 import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';

package/Snackbar/useSnackbar.d.ts

@@ -0,0 +1,14 @@
+import { UseSnackbarParameters, UseSnackbarReturnValue } from './useSnackbar.types';
+/**
+ * The basic building block for creating custom snackbar.
+ *
+ * Demos:
+ *
+ * - [Snackbar](https://next.mui.com/base-ui/react-snackbar/#hook)
+ *
+ * API:
+ *
+ * - [useSnackbar API](https://next.mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)
+ */
+declare function useSnackbar(parameters?: UseSnackbarParameters): UseSnackbarReturnValue;
+export default useSnackbar;

package/Snackbar/useSnackbar.js

@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback, unstable_useTimeout as useTimeout } from '@mui/utils';
+import extractEventHandlers from '@mui/utils/extractEventHandlers';
+/**
+ * The basic building block for creating custom snackbar.
+ *
+ * Demos:
+ *
+ * - [Snackbar](https://next.mui.com/base-ui/react-snackbar/#hook)
+ *
+ * API:
+ *
+ * - [useSnackbar API](https://next.mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)
+ */
+function useSnackbar(parameters = {}) {
+  const {
+    autoHideDuration = null,
+    disableWindowBlurListener = false,
+    onClose,
+    open,
+    resumeHideDuration
+  } = parameters;
+  const timerAutoHide = useTimeout();
+  React.useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    /**
+     * @param {KeyboardEvent} nativeEvent
+     */
+    function handleKeyDown(nativeEvent) {
+      if (!nativeEvent.defaultPrevented) {
+        if (nativeEvent.key === 'Escape') {
+          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
+          onClose?.(nativeEvent, 'escapeKeyDown');
+        }
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onClose]);
+  const handleClose = useEventCallback((event, reason) => {
+    onClose?.(event, reason);
+  });
+  const setAutoHideTimer = useEventCallback(autoHideDurationParam => {
+    if (!onClose || autoHideDurationParam == null) {
+      return;
+    }
+    timerAutoHide.start(autoHideDurationParam, () => {
+      handleClose(null, 'timeout');
+    });
+  });
+  React.useEffect(() => {
+    if (open) {
+      setAutoHideTimer(autoHideDuration);
+    }
+    return timerAutoHide.clear;
+  }, [open, autoHideDuration, setAutoHideTimer, timerAutoHide]);
+  const handleClickAway = event => {
+    onClose?.(event, 'clickaway');
+  };
+
+  // Pause the timer when the user is interacting with the Snackbar
+  // or when the user hide the window.
+  const handlePause = timerAutoHide.clear;
+
+  // Restart the timer when the user is no longer interacting with the Snackbar
+  // or when the window is shown back.
+  const handleResume = React.useCallback(() => {
+    if (autoHideDuration != null) {
+      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
+    }
+  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
+  const createHandleBlur = otherHandlers => event => {
+    const onBlurCallback = otherHandlers.onBlur;
+    onBlurCallback?.(event);
+    handleResume();
+  };
+  const createHandleFocus = otherHandlers => event => {
+    const onFocusCallback = otherHandlers.onFocus;
+    onFocusCallback?.(event);
+    handlePause();
+  };
+  const createMouseEnter = otherHandlers => event => {
+    const onMouseEnterCallback = otherHandlers.onMouseEnter;
+    onMouseEnterCallback?.(event);
+    handlePause();
+  };
+  const createMouseLeave = otherHandlers => event => {
+    const onMouseLeaveCallback = otherHandlers.onMouseLeave;
+    onMouseLeaveCallback?.(event);
+    handleResume();
+  };
+  React.useEffect(() => {
+    // TODO: window global should be refactored here
+    if (!disableWindowBlurListener && open) {
+      window.addEventListener('focus', handleResume);
+      window.addEventListener('blur', handlePause);
+      return () => {
+        window.removeEventListener('focus', handleResume);
+        window.removeEventListener('blur', handlePause);
+      };
+    }
+    return undefined;
+  }, [disableWindowBlurListener, open, handleResume, handlePause]);
+  const getRootProps = (externalProps = {}) => {
+    const externalEventHandlers = {
+      ...extractEventHandlers(parameters),
+      ...extractEventHandlers(externalProps)
+    };
+    return {
+      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+      // See https://github.com/mui/material-ui/issues/29080
+      role: 'presentation',
+      ...externalProps,
+      ...externalEventHandlers,
+      onBlur: createHandleBlur(externalEventHandlers),
+      onFocus: createHandleFocus(externalEventHandlers),
+      onMouseEnter: createMouseEnter(externalEventHandlers),
+      onMouseLeave: createMouseLeave(externalEventHandlers)
+    };
+  };
+  return {
+    getRootProps,
+    onClickAway: handleClickAway
+  };
+}
+export default useSnackbar;

package/Snackbar/useSnackbar.types.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
+export interface UseSnackbarParameters {
+    /**
+     * The number of milliseconds to wait before automatically calling the
+     * `onClose` function. `onClose` should then set the state of the `open`
+     * prop to hide the Snackbar. This behavior is disabled by default with
+     * the `null` value.
+     * @default null
+     */
+    autoHideDuration?: number | null;
+    /**
+     * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.
+     * @default false
+     */
+    disableWindowBlurListener?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     * Typically `onClose` is used to set state in the parent component,
+     * which is used to control the `Snackbar` `open` prop.
+     * The `reason` parameter can optionally be used to control the response to `onClose`,
+     * for example ignoring `clickaway`.
+     *
+     * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+     * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
+     */
+    onClose?: (event: React.SyntheticEvent<any> | Event | null, reason: SnackbarCloseReason) => void;
+    /**
+     * If `true`, the component is shown.
+     */
+    open?: boolean;
+    /**
+     * The number of milliseconds to wait before dismissing after user interaction.
+     * If `autoHideDuration` prop isn't specified, it does nothing.
+     * If `autoHideDuration` prop is specified but `resumeHideDuration` isn't,
+     * we default to `autoHideDuration / 2` ms.
+     */
+    resumeHideDuration?: number;
+}
+export type UseSnackbarRootSlotProps<ExternalProps = {}> = ExternalProps & UseSnackbarRootSlotOwnProps;
+export interface UseSnackbarRootSlotOwnProps {
+    onBlur: React.FocusEventHandler;
+    onFocus: React.FocusEventHandler;
+    onMouseEnter: React.MouseEventHandler;
+    onMouseLeave: React.MouseEventHandler;
+    ref?: React.RefCallback<Element>;
+    role: React.AriaRole;
+}
+export interface UseSnackbarReturnValue {
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: <ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSnackbarRootSlotProps<ExternalProps>;
+    /**
+     * Callback fired when a "click away" event is detected.
+     */
+    onClickAway: (event: React.SyntheticEvent<any> | Event) => void;
+}

package/Snackbar/useSnackbar.types.js

@@ -0,0 +1 @@
+export {};

package/SwipeableDrawer/SwipeableDrawer.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import { NoSsr } from '@mui/base';
+import NoSsr from '../NoSsr';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import useForkRef from '../utils/useForkRef';
 import ownerDocument from '../utils/ownerDocument';

package/TabScrollButton/TabScrollButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/base';
+import { SlotComponentProps } from '../utils/types';
 import { ButtonBaseProps } from '../ButtonBase';
 import { SvgIcon, Theme } from '..';
 import { TabScrollButtonClasses } from './tabScrollButtonClasses';

package/TabScrollButton/TabScrollButton.js

@@ -4,9 +4,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
+import useSlotProps from '@mui/utils/useSlotProps';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';

package/TablePagination/TablePagination.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import isHostComponent from '../utils/isHostComponent';
 import { styled } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import InputBase from '../InputBase';

package/Tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/base';
 import { OverridableStringUnion } from '@mui/types';
+import { SlotComponentProps } from '../utils/types';
 import { Theme } from '../styles';
 import { TabScrollButtonProps } from '../TabScrollButton';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';

package/Tabs/Tabs.js

@@ -5,9 +5,9 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import refType from '@mui/utils/refType';
-import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { styled, useTheme } from '../zero-styled';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import debounce from '../utils/debounce';

package/TextareaAutosize/TextareaAutosize.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { TextareaAutosizeProps } from './TextareaAutosize.types';
+/**
+ *
+ * Demos:
+ *
+ * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
+ *
+ * API:
+ *
+ * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
+ */
+declare const TextareaAutosize: React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<Element>>;
+export default TextareaAutosize;