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

package/modern/StepConnector/stepConnectorClasses.d.ts

@@ -0,0 +1,30 @@
+export interface StepConnectorClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the root element if `alternativeLabel={true}`. */
+  alternativeLabel: string;
+  /** State class applied to the root element if `active={true}`. */
+  active: string;
+  /** State class applied to the root element if `completed={true}`. */
+  completed: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the line element if `orientation="horizontal"`.
+   * @deprecated Combine the [.MuiStepConnector-horizontal](/material-ui/api/step-connector/#step-connector-classes-horizontal) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  lineHorizontal: string;
+  /** Styles applied to the line element if `orientation="vertical"`.
+   * @deprecated Combine the [.MuiStepConnector-vertical](/material-ui/api/step-connector/#step-connector-classes-vertical) and [.MuiStepConnector-line](/material-ui/api/step-connector/#step-connector-classes-line) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  lineVertical: string;
+}
+export type StepConnectorClassKey = keyof StepConnectorClasses;
+export declare function getStepConnectorUtilityClass(slot: string): string;
+declare const stepConnectorClasses: StepConnectorClasses;
+export default stepConnectorClasses;

package/modern/StepContent/StepContent.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { CollapseProps, InternalStandardProps as StandardProps } from "../index.js";
+import { Theme } from "../styles/index.js";
+import { TransitionProps } from "../transitions/transition.js";
+import { StepContentClasses } from "./stepContentClasses.js";
+import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.js";
+export interface StepContentSlots {
+  /**
+   * The component that renders the transition slot.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.JSXElementConstructor<TransitionProps & {
+    children?: React.ReactElement<unknown, any>;
+  }>;
+}
+export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<StepContentSlots, {
+  /**
+   * Props forwared to the transition slot.
+   * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
+   */
+  transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
+}>;
+export interface StepContentOwnerState extends StepContentProps {}
+export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepContentSlotsAndSlotProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepContentClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   */
+  TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
+    children: React.ReactElement<unknown, any>;
+  }>;
+  /**
+   * Adjust the duration of the content expand transition.
+   * Passed as a prop to the transition component.
+   *
+   * Set to 'auto' to automatically calculate transition time based on height.
+   * @default 'auto'
+   */
+  transitionDuration?: TransitionProps['timeout'] | 'auto';
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  TransitionProps?: TransitionProps;
+}
+export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [StepContent API](https://next.mui.com/material-ui/api/step-content/)
+ */
+export default function StepContent(props: StepContentProps): React.JSX.Element;

package/modern/StepContent/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./StepContent.js";
+export * from "./StepContent.js";
+export { default as stepContentClasses } from "./stepContentClasses.js";
+export * from "./stepContentClasses.js";

package/modern/StepContent/stepContentClasses.d.ts

@@ -0,0 +1,12 @@
+export interface StepContentClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `last={true}` (controlled by `Step`). */
+  last: string;
+  /** Styles applied to the Transition component. */
+  transition: string;
+}
+export type StepContentClassKey = keyof StepContentClasses;
+export declare function getStepContentUtilityClass(slot: string): string;
+declare const stepContentClasses: StepContentClasses;
+export default stepContentClasses;

package/modern/StepIcon/StepIcon.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, SvgIconOwnProps } from "../index.js";
+import { Theme } from "../styles/index.js";
+import { StepIconClasses } from "./stepIconClasses.js";
+export interface StepIconProps
+// TODO v7: extend React.HTMLAttributes<SVGSVGElement> as svg is root component of StepIcon not div
+extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>, Omit<SvgIconOwnProps, 'children'> {
+  /**
+   * Whether this step is active.
+   * @default false
+   */
+  active?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepIconClasses>;
+  /**
+   * Mark the step as completed. Is passed to child components.
+   * @default false
+   */
+  completed?: boolean;
+  /**
+   * If `true`, the step is marked as failed.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * The label displayed in the step icon.
+   */
+  icon: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [StepIcon API](https://next.mui.com/material-ui/api/step-icon/)
+ * - inherits [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
+ */
+export default function StepIcon(props: StepIconProps): React.JSX.Element;

package/modern/StepIcon/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./StepIcon.js";
+export * from "./StepIcon.js";
+export { default as stepIconClasses } from "./stepIconClasses.js";
+export * from "./stepIconClasses.js";

package/modern/StepIcon/stepIconClasses.d.ts

@@ -0,0 +1,16 @@
+export interface StepIconClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the SVG text element. */
+  text: string;
+  /** State class applied to the root element if `active={true}`. */
+  active: string;
+  /** State class applied to the root element if `completed={true}`. */
+  completed: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+}
+export type StepIconClassKey = keyof StepIconClasses;
+export declare function getStepIconUtilityClass(slot: string): string;
+declare const stepIconClasses: StepIconClasses;
+export default stepIconClasses;

package/modern/StepLabel/StepLabel.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps } from "../index.js";
+import { StepIconProps } from "../StepIcon/index.js";
+import { Theme } from "../styles/index.js";
+import { StepLabelClasses } from "./stepLabelClasses.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+export interface StepLabelSlots {
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label: React.ElementType;
+  /**
+   * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
+   */
+  stepIcon: React.ElementType;
+}
+export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<StepLabelSlots, {
+  label: SlotProps<React.ElementType<React.HTMLProps<HTMLSpanElement>>, {}, StepLabelOwnerState>;
+  stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>;
+}>;
+export interface StepLabelOwnerState extends StepLabelProps {}
+export interface StepLabelProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepLabelSlotsAndSlotProps {
+  /**
+   * In most cases will simply be a string containing a title for the label.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepLabelClasses>;
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  componentsProps?: {
+    /**
+     * Props applied to the label element.
+     * @default {}
+     */
+    label?: React.HTMLProps<HTMLSpanElement>;
+  };
+  /**
+   * If `true`, the step is marked as failed.
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * Override the default label of the step icon.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The optional node to display.
+   */
+  optional?: React.ReactNode;
+  /**
+   * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  StepIconComponent?: React.ElementType<StepIconProps>;
+  /**
+   * Props applied to the [`StepIcon`](https://mui.com/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  StepIconProps?: Partial<StepIconProps>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [StepLabel API](https://next.mui.com/material-ui/api/step-label/)
+ */
+declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
+  muiName: string;
+};
+export default StepLabel;

package/modern/StepLabel/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./StepLabel.js";
+export * from "./StepLabel.js";
+export { default as stepLabelClasses } from "./stepLabelClasses.js";
+export * from "./stepLabelClasses.js";

package/modern/StepLabel/stepLabelClasses.d.ts

@@ -0,0 +1,28 @@
+export interface StepLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the label element that wraps `children`. */
+  label: string;
+  /** State class applied to the label element if `active={true}`. */
+  active: string;
+  /** State class applied to the label element if `completed={true}`. */
+  completed: string;
+  /** State class applied to the root and label elements if `error={true}`. */
+  error: string;
+  /** State class applied to the root and label elements if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the `icon` container element. */
+  iconContainer: string;
+  /** State class applied to the root and icon container and label if `alternativeLabel={true}`. */
+  alternativeLabel: string;
+  /** Styles applied to the container element which wraps label and `optional`. */
+  labelContainer: string;
+}
+export type StepLabelClassKey = keyof StepLabelClasses;
+export declare function getStepLabelUtilityClass(slot: string): string;
+declare const stepLabelClasses: StepLabelClasses;
+export default stepLabelClasses;

package/modern/Stepper/Stepper.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { PaperProps } from "../Paper/index.js";
+import { StepperClasses } from "./stepperClasses.js";
+export type Orientation = 'horizontal' | 'vertical';
+export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square' | 'variant'> {
+  /**
+   * Set the active step (zero based index).
+   * Set to -1 to disable all the steps.
+   * @default 0
+   */
+  activeStep?: number;
+  /**
+   * If set to 'true' and orientation is horizontal,
+   * then the step label will be positioned under the icon.
+   * @default false
+   */
+  alternativeLabel?: boolean;
+  /**
+   * Two or more `<Step />` components.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<StepperClasses>;
+  /**
+   * An element to be placed between each step.
+   * @default <StepConnector />
+   */
+  connector?: React.ReactElement<unknown, any> | null;
+  /**
+   * If set the `Stepper` will not assist in controlling steps for linear flow.
+   * @default false
+   */
+  nonLinear?: boolean;
+  /**
+   * The component orientation (layout flow direction).
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface StepperTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & StepperOwnProps;
+  defaultComponent: RootComponent;
+}
+export type StepperProps<RootComponent extends React.ElementType = StepperTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<StepperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [Stepper API](https://next.mui.com/material-ui/api/stepper/)
+ */
+declare const Stepper: OverridableComponent<StepperTypeMap>;
+export default Stepper;

package/modern/Stepper/StepperContext.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface StepperContextType {
+  activeStep: number;
+  alternativeLabel: boolean;
+  connector: React.ReactNode;
+  nonLinear: boolean;
+  orientation: 'horizontal' | 'vertical';
+}
+/**
+ * Provides information about the current step in Stepper.
+ */
+declare const StepperContext: React.Context<{} | StepperContextType>;
+/**
+ * Returns the current StepperContext or an empty object if no StepperContext
+ * has been defined in the component tree.
+ */
+export declare function useStepperContext(): StepperContextType | {};
+export default StepperContext;

package/modern/Stepper/index.d.ts

@@ -0,0 +1,6 @@
+export { default } from "./Stepper.js";
+export * from "./Stepper.js";
+export { default as stepperClasses } from "./stepperClasses.js";
+export * from "./stepperClasses.js";
+export { default as StepperContext } from "./StepperContext.js";
+export * from "./StepperContext.js";

package/modern/Stepper/stepperClasses.d.ts

@@ -0,0 +1,16 @@
+export interface StepperClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `orientation="horizontal"`. */
+  horizontal: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the root element if `nonLinear={true}`. */
+  nonLinear: string;
+  /** Styles applied to the root element if `alternativeLabel={true}`. */
+  alternativeLabel: string;
+}
+export type StepperClassKey = keyof StepperClasses;
+export declare function getStepperUtilityClass(slot: string): string;
+declare const stepperClasses: StepperClasses;
+export default stepperClasses;

package/modern/SvgIcon/SvgIcon.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from "../styles/index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { SvgIconClasses } from "./svgIconClasses.js";
+export interface SvgIconPropsSizeOverrides {}
+export interface SvgIconPropsColorOverrides {}
+export interface SvgIconOwnProps {
+  /**
+   * Node passed into the SVG element.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SvgIconClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color?: OverridableStringUnion<'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', SvgIconPropsColorOverrides>;
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize?: OverridableStringUnion<'inherit' | 'large' | 'medium' | 'small', SvgIconPropsSizeOverrides>;
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor?: string;
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox?: boolean;
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess?: string;
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox?: string;
+}
+export interface SvgIconTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'svg'> {
+  props: AdditionalProps & SvgIconOwnProps;
+  defaultComponent: RootComponent;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Icons](https://next.mui.com/material-ui/icons/)
+ * - [Material Icons](https://next.mui.com/material-ui/material-icons/)
+ *
+ * API:
+ *
+ * - [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
+ */
+declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & {
+  muiName: string;
+};
+export type SvgIconProps<RootComponent extends React.ElementType = SvgIconTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<SvgIconTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default SvgIcon;

package/modern/SvgIcon/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./SvgIcon.js";
+export * from "./SvgIcon.js";
+export { default as svgIconClasses } from "./svgIconClasses.js";
+export * from "./svgIconClasses.js";

package/modern/SvgIcon/svgIconClasses.d.ts

@@ -0,0 +1,26 @@
+export interface SvgIconClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+  /** Styles applied to the root element if `color="action"`. */
+  colorAction: string;
+  /** Styles applied to the root element if `color="error"`. */
+  colorError: string;
+  /** Styles applied to the root element if `color="disabled"`. */
+  colorDisabled: string;
+  /** Styles applied to the root element if `fontSize="inherit"`. */
+  fontSizeInherit: string;
+  /** Styles applied to the root element if `fontSize="small"`. */
+  fontSizeSmall: string;
+  /** Styles applied to the root element if `fontSize="medium"`. */
+  fontSizeMedium: string;
+  /** Styles applied to the root element if `fontSize="large"`. */
+  fontSizeLarge: string;
+}
+export type SvgIconClassKey = keyof SvgIconClasses;
+export declare function getSvgIconUtilityClass(slot: string): string;
+declare const svgIconClasses: SvgIconClasses;
+export default svgIconClasses;

package/modern/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { DrawerProps, DrawerOwnerState, DrawerSlotsAndSlotProps } from "../Drawer/index.js";
+export interface SwipeableDrawerSwipeAreaSlotPropsOverrides {}
+export interface SwipeableDrawerSlots {
+  /**
+   * The component used for the swipeArea slot.
+   * @default div
+   */
+  swipeArea?: React.ElementType;
+}
+type SwipeableDrawerSlotsAndSlotProps = DrawerSlotsAndSlotProps & CreateSlotsAndSlotProps<SwipeableDrawerSlots, {
+  /**
+   * Props forwarded to the docked slot.
+   * By default, the avaible props are based on a div element.
+   */
+  swipeArea: SlotProps<'div', SwipeableDrawerSwipeAreaSlotPropsOverrides, DrawerOwnerState>;
+}>;
+export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open' | 'slots' | 'slotProps'>, SwipeableDrawerSlotsAndSlotProps {
+  /**
+   * If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer's children.
+   * This can be useful in scenarios where the drawer is partially visible.
+   * You can customize it further with a callback that determines which children the user can drag over to open the drawer
+   * (for example, to ignore other elements that handle touch move events, like sliders).
+   *
+   * @param {TouchEvent} event The 'touchstart' event
+   * @param {HTMLDivElement} swipeArea The swipe area element
+   * @param {HTMLDivElement} paper The drawer's paper element
+   *
+   * @default false
+   */
+  allowSwipeInChildren?: boolean | ((event: TouchEvent, swipeArea: HTMLDivElement, paper: HTMLDivElement) => boolean);
+  /**
+   * Disable the backdrop transition.
+   * This can improve the FPS on low-end devices.
+   * @default false
+   */
+  disableBackdropTransition?: boolean;
+  /**
+   * If `true`, touching the screen near the edge of the drawer will not slide in the drawer a bit
+   * to promote accidental discovery of the swipe gesture.
+   * @default false
+   */
+  disableDiscovery?: boolean;
+  /**
+   * If `true`, swipe to open is disabled. This is useful in browsers where swiping triggers
+   * navigation actions. Swipe to open is disabled on iOS browsers by default.
+   * @default typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)
+   */
+  disableSwipeToOpen?: boolean;
+  /**
+   * Affects how far the drawer must be opened/closed to change its state.
+   * Specified as percent (0-1) of the width of the drawer
+   * @default 0.52
+   */
+  hysteresis?: number;
+  /**
+   * Defines, from which (average) velocity on, the swipe is
+   * defined as complete although hysteresis isn't reached.
+   * Good threshold is between 250 - 1000 px/s
+   * @default 450
+   */
+  minFlingVelocity?: number;
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {React.SyntheticEvent<{}>} event The event source of the callback.
+   */
+  onClose: React.ReactEventHandler<{}>;
+  /**
+   * Callback fired when the component requests to be opened.
+   *
+   * @param {React.SyntheticEvent<{}>} event The event source of the callback.
+   */
+  onOpen: React.ReactEventHandler<{}>;
+  /**
+   * If `true`, the component is shown.
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * The element is used to intercept the touch events on the edge.
+   * @deprecated use the `slotProps.swipeArea` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  SwipeAreaProps?: object;
+  /**
+   * The width of the left most (or right most) area in `px` that
+   * the drawer can be swiped open from.
+   * @default 20
+   */
+  swipeAreaWidth?: number;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
+ *
+ * API:
+ *
+ * - [SwipeableDrawer API](https://next.mui.com/material-ui/api/swipeable-drawer/)
+ * - inherits [Drawer API](https://next.mui.com/material-ui/api/drawer/)
+ */
+declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;
+export default SwipeableDrawer;