@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

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';
@@ -37,7 +37,7 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
   /**
    * Replace the `SnackbarContent` component.
    */
-  children?: React.ReactElement<any, any>;
+  children?: React.ReactElement<unknown, any>;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -98,7 +98,7 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    * @default Grow
    */
   TransitionComponent?: React.JSXElementConstructor<
-    TransitionProps & { children: React.ReactElement<any, any> }
+    TransitionProps & { children: React.ReactElement<unknown, any> }
   >;
   /**
    * The duration for the transition, in milliseconds.
@@ -127,4 +127,4 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
  *
  * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
  */
-export default function Snackbar(props: SnackbarProps): JSX.Element;
+export default function Snackbar(props: SnackbarProps): React.JSX.Element;

package/Snackbar/Snackbar.js

@@ -1,22 +1,18 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["onEnter", "onExited"],
-  _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 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 styled from '../styles/styled';
-import useTheme from '../styles/useTheme';
-import useThemeProps from '../styles/useThemeProps';
-import capitalize from '../utils/capitalize';
-import Grow from '../Grow';
-import SnackbarContent from '../SnackbarContent';
-import { getSnackbarUtilityClass } from './snackbarClasses';
+import useSlotProps from '@mui/utils/useSlotProps';
+import useSnackbar from "./useSnackbar.js";
+import ClickAwayListener from "../ClickAwayListener/index.js";
+import { styled, useTheme } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import capitalize from "../utils/capitalize.js";
+import Grow from "../Grow/index.js";
+import SnackbarContent from "../SnackbarContent/index.js";
+import { getSnackbarUtilityClass } from "./snackbarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -37,47 +33,73 @@ const SnackbarRoot = styled('div', {
     } = props;
     return [styles.root, styles[`anchorOrigin${capitalize(ownerState.anchorOrigin.vertical)}${capitalize(ownerState.anchorOrigin.horizontal)}`]];
   }
-})(({
-  theme,
-  ownerState
-}) => {
-  const center = {
-    left: '50%',
-    right: 'auto',
-    transform: 'translateX(-50%)'
-  };
-  return _extends({
-    zIndex: (theme.vars || theme).zIndex.snackbar,
-    position: 'fixed',
-    display: 'flex',
-    left: 8,
-    right: 8,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }, ownerState.anchorOrigin.vertical === 'top' ? {
-    top: 8
-  } : {
-    bottom: 8
-  }, ownerState.anchorOrigin.horizontal === 'left' && {
-    justifyContent: 'flex-start'
-  }, ownerState.anchorOrigin.horizontal === 'right' && {
-    justifyContent: 'flex-end'
+})(memoTheme(({
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.snackbar,
+  position: 'fixed',
+  display: 'flex',
+  left: 8,
+  right: 8,
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top',
+    style: {
+      top: 8,
+      [theme.breakpoints.up('sm')]: {
+        top: 24
+      }
+    }
   }, {
-    [theme.breakpoints.up('sm')]: _extends({}, ownerState.anchorOrigin.vertical === 'top' ? {
-      top: 24
-    } : {
-      bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
-      left: 24,
-      right: 'auto'
-    }, ownerState.anchorOrigin.horizontal === 'right' && {
-      right: 24,
-      left: 'auto'
-    })
-  });
-});
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical !== 'top',
+    style: {
+      bottom: 8,
+      [theme.breakpoints.up('sm')]: {
+        bottom: 24
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'left',
+    style: {
+      justifyContent: 'flex-start',
+      [theme.breakpoints.up('sm')]: {
+        left: 24,
+        right: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'right',
+    style: {
+      justifyContent: 'flex-end',
+      [theme.breakpoints.up('sm')]: {
+        right: 24,
+        left: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'center',
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        left: '50%',
+        right: 'auto',
+        transform: 'translateX(-50%)'
+      }
+    }
+  }]
+})));
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiSnackbar'
   });
@@ -87,32 +109,39 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      action,
-      anchorOrigin: {
-        vertical,
-        horizontal
-      } = {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      autoHideDuration = null,
-      children,
-      className,
-      ClickAwayListenerProps,
-      ContentProps,
-      disableWindowBlurListener = false,
-      message,
-      open,
-      TransitionComponent = Grow,
-      transitionDuration = defaultTransitionDuration,
-      TransitionProps: {
-        onEnter,
-        onExited
-      } = {}
-    } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const ownerState = _extends({}, props, {
+    action,
+    anchorOrigin: {
+      vertical,
+      horizontal
+    } = {
+      vertical: 'bottom',
+      horizontal: 'left'
+    },
+    autoHideDuration = null,
+    children,
+    className,
+    ClickAwayListenerProps,
+    ContentProps,
+    disableWindowBlurListener = false,
+    message,
+    onBlur,
+    onClose,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    open,
+    resumeHideDuration,
+    TransitionComponent = Grow,
+    transitionDuration = defaultTransitionDuration,
+    TransitionProps: {
+      onEnter,
+      onExited,
+      ...TransitionProps
+    } = {},
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     anchorOrigin: {
       vertical,
       horizontal
@@ -121,12 +150,14 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     disableWindowBlurListener,
     TransitionComponent,
     transitionDuration
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const {
     getRootProps,
     onClickAway
-  } = useSnackbar(_extends({}, ownerState));
+  } = useSnackbar({
+    ...ownerState
+  });
   const [exited, setExited] = React.useState(true);
   const rootProps = useSlotProps({
     elementType: SnackbarRoot,
@@ -155,25 +186,27 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
   if (!open && exited) {
     return null;
   }
-  return /*#__PURE__*/_jsx(ClickAwayListener, _extends({
-    onClickAway: onClickAway
-  }, ClickAwayListenerProps, {
-    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({}, rootProps, {
-      children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(ClickAwayListener, {
+    onClickAway: onClickAway,
+    ...ClickAwayListenerProps,
+    children: /*#__PURE__*/_jsx(SnackbarRoot, {
+      ...rootProps,
+      children: /*#__PURE__*/_jsx(TransitionComponent, {
         appear: true,
         in: open,
         timeout: transitionDuration,
         direction: vertical === 'top' ? 'down' : 'up',
         onEnter: handleEnter,
-        onExited: handleExited
-      }, TransitionProps, {
-        children: children || /*#__PURE__*/_jsx(SnackbarContent, _extends({
+        onExited: handleExited,
+        ...TransitionProps,
+        children: children || /*#__PURE__*/_jsx(SnackbarContent, {
           message: message,
-          action: action
-        }, ContentProps))
-      }))
-    }))
-  }));
+          action: action,
+          ...ContentProps
+        })
+      })
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Snackbar/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Snackbar';
-export { default as snackbarClasses } from './snackbarClasses';
-export * from './snackbarClasses';
+export { default } from "./Snackbar.js";
+export { default as snackbarClasses } from "./snackbarClasses.js";
+export * from "./snackbarClasses.js";

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://mui.com/base-ui/react-snackbar/#hook)
+ *
+ * API:
+ *
+ * - [useSnackbar API](https://mui.com/base-ui/react-snackbar/hooks-api/#use-snackbar)
+ */
+declare function useSnackbar(parameters?: UseSnackbarParameters): UseSnackbarReturnValue;
+export default useSnackbar;