tessl/npm-mui--lab

Laboratory for new Material UI modules - hosts incubator components that are not yet ready to move to core

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Deprecated Components

Name: tessl/npm-mui--lab
Author: tessl

Many components previously available in MUI Lab have been moved to dedicated packages for better maintainability and feature development. These components remain in @mui/lab as deprecated stubs that show warning messages and return null.

Migration Overview

When you import and use any of the deprecated components, you'll see a console warning with migration instructions and a link to more information.

Date/Time Pickers → @mui/x-date-pickers

All date and time picker components have been moved to the @mui/x-date-pickers package.

Deprecated Components

// All these components are deprecated and show warnings
export { CalendarPicker } from '@mui/lab';
export { ClockPicker } from '@mui/lab';
export { DatePicker } from '@mui/lab';
export { DateRangePicker } from '@mui/lab';
export { DateTimePicker } from '@mui/lab';
export { TimePicker } from '@mui/lab';

// Desktop variants
export { DesktopDatePicker } from '@mui/lab';
export { DesktopDateRangePicker } from '@mui/lab';
export { DesktopDateTimePicker } from '@mui/lab';
export { DesktopTimePicker } from '@mui/lab';

// Mobile variants
export { MobileDatePicker } from '@mui/lab';
export { MobileDateRangePicker } from '@mui/lab';
export { MobileDateTimePicker } from '@mui/lab';
export { MobileTimePicker } from '@mui/lab';

// Static variants
export { StaticDatePicker } from '@mui/lab';
export { StaticDateRangePicker } from '@mui/lab';
export { StaticDateTimePicker } from '@mui/lab';
export { StaticTimePicker } from '@mui/lab';

// Utilities and supporting components
export { CalendarPickerSkeleton } from '@mui/lab';
export { PickersDay } from '@mui/lab';
export { DateRangePickerDay } from '@mui/lab';
export { MonthPicker } from '@mui/lab';
export { YearPicker } from '@mui/lab';

// Localization and adapters
export { LocalizationProvider } from '@mui/lab';
export { AdapterDateFns } from '@mui/lab';
export { AdapterDayjs } from '@mui/lab';
export { AdapterLuxon } from '@mui/lab';
export { AdapterMoment } from '@mui/lab';

Migration Examples

// OLD (deprecated)
import { DatePicker, LocalizationProvider, AdapterDateFns } from '@mui/lab';

// NEW (recommended)
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

// OLD (deprecated)
import { DesktopDateTimePicker } from '@mui/lab';

// NEW (recommended)
import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker';

Installation

npm install @mui/x-date-pickers

# For date-fns adapter
npm install date-fns

# For dayjs adapter  
npm install dayjs

# For luxon adapter
npm install luxon

# For moment adapter
npm install moment

Tree Components → @mui/x-tree-view

Tree components have been moved to a dedicated package for enhanced functionality.

Deprecated Components

// These components show deprecation warnings
export { TreeView } from '@mui/lab';
export { TreeItem } from '@mui/lab';

Migration Examples

// OLD (deprecated)
import { TreeView, TreeItem } from '@mui/lab';

// NEW (recommended)
import { TreeView } from '@mui/x-tree-view/TreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';

// Or import from package root
import { TreeView, TreeItem } from '@mui/x-tree-view';

Installation

npm install @mui/x-tree-view

LoadingButton → @mui/material/Button

The LoadingButton functionality has been integrated into the core Button component.

Deprecated Component

// This component shows deprecation warnings
export { LoadingButton } from '@mui/lab';

Migration Example

// OLD (deprecated) 
import { LoadingButton } from '@mui/lab';

function MyComponent() {
  return (
    <LoadingButton loading={isLoading} variant="contained">
      Submit
    </LoadingButton>
  );
}

// NEW (recommended)
import { Button } from '@mui/material';

function MyComponent() {
  return (
    <Button loading={isLoading} variant="contained">
      Submit
    </Button>
  );
}

Warning Messages

When you use any deprecated component, you'll see console warnings like:

MUI: The DatePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`.

You should use `import { DatePicker } from '@mui/x-date-pickers'`
or `import { DatePicker } from '@mui/x-date-pickers/DatePicker'`

More information about this migration on our blog: https://mui.com/blog/lab-date-pickers-to-mui-x/.

Migration Resources

Removal Timeline

These deprecated components will be removed in a future major version of MUI Lab. It's recommended to migrate as soon as possible to take advantage of new features and bug fixes in the dedicated packages.