or run

tessl search
Log in

Version

Files

tile.json

tessl/npm-mui--lab

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mui/lab@7.0.x

To install, run

tessl install tessl/npm-mui--lab@7.0.0

index.mddocs/

MUI Lab

MUI Lab is the experimental laboratory for new Material UI components that are not yet ready to move to the core library. It provides incubator components including enhanced navigation tabs, masonry layout, timeline components, and legacy deprecated components that have been moved to dedicated packages.

Important: Many components have been migrated to dedicated packages: date/time pickers moved to @mui/x-date-pickers, tree components to @mui/x-tree-view, and LoadingButton functionality integrated into @mui/material/Button. These components remain in @mui/lab as deprecated stubs that show migration warnings.

Package Information

  • Package Name: @mui/lab
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @mui/lab @mui/material @emotion/react @emotion/styled
  • Peer Dependencies: @mui/material (required), @emotion/react and @emotion/styled (optional but recommended)

Core Imports

Active Components:

import { TabContext, TabList, TabPanel } from '@mui/lab';
import { Timeline, TimelineItem, TimelineContent, TimelineDot, TimelineSeparator, TimelineConnector, TimelineOppositeContent } from '@mui/lab';
import { Masonry } from '@mui/lab';
import { useAutocomplete } from '@mui/lab';

Deprecated Components (available but show warnings):

// These will show deprecation warnings and redirect to new packages
import { DatePicker, TreeView, LoadingButton } from '@mui/lab';

For CommonJS:

const { TabContext, TabList, TabPanel, Masonry } = require('@mui/lab');

Basic Usage

import React from 'react';
import { TabContext, TabList, TabPanel } from '@mui/lab';
import { Tab, Box } from '@mui/material';

function BasicTabs() {
  const [value, setValue] = React.useState('1');

  return (
    <TabContext value={value}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <TabList onChange={(event, newValue) => setValue(newValue)}>
          <Tab label="Item One" value="1" />
          <Tab label="Item Two" value="2" />
        </TabList>
      </Box>
      <TabPanel value="1">Item One Content</TabPanel>
      <TabPanel value="2">Item Two Content</TabPanel>
    </TabContext>
  );
}

Architecture

MUI Lab components are built on the Material-UI foundation with several key design patterns:

  • Context-based Navigation: Tab components use React Context for coordinated state management
  • Responsive Layout: Masonry component supports responsive breakpoints and dynamic sizing
  • Composite Timeline: Timeline components work together as a coordinated system for rich temporal displays
  • Material-UI Integration: All components support theming, styling via sx prop, and custom CSS classes
  • Accessibility: Built-in ARIA attributes and keyboard navigation support

Capabilities

Enhanced Tab Navigation

Advanced tab functionality with context-based coordination and automatic ARIA attribute management for accessible navigation.

// Context provider for tab coordination
function TabContext(props: TabContextProps): JSX.Element;

interface TabContextProps {
  children?: React.ReactNode;
  value: string | number;
}

Tab Navigation

Masonry Layout

Pinterest-style masonry layout with responsive column configuration and flexible spacing options for dynamic content grids.

function Masonry(props: MasonryProps): JSX.Element;

interface MasonryProps {
  children: NonNullable<React.ReactNode>;
  columns?: ResponsiveStyleValue<number | string>;
  spacing?: ResponsiveStyleValue<number | string>;
  sequential?: boolean;
}

Masonry Layout

Timeline Components

Complete timeline system with positioning, styling, and content organization for displaying chronological information. Includes all components for building rich temporal displays.

function Timeline(props: TimelineProps): JSX.Element;
function TimelineItem(props: TimelineItemProps): JSX.Element;
function TimelineContent(props: TimelineContentProps): JSX.Element;
function TimelineDot(props: TimelineDotProps): JSX.Element;
function TimelineConnector(props: TimelineConnectorProps): JSX.Element;
function TimelineSeparator(props: TimelineSeparatorProps): JSX.Element;
function TimelineOppositeContent(props: TimelineOppositeContentProps): JSX.Element;

interface TimelineProps {
  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
  children?: React.ReactNode;
}

Timeline System

Autocomplete Hook

React hook providing autocomplete functionality with filtering and selection management (re-exported from @mui/material).

function useAutocomplete<T>(props: UseAutocompleteProps<T>): UseAutocompleteReturnValue<T>;

Autocomplete Hook

Common Types

// Standard Material-UI component props
interface StandardProps<T = {}> extends T {
  className?: string;
  classes?: object;
  sx?: SxProps<Theme>;
}

// Responsive value type for breakpoint-aware properties
type ResponsiveStyleValue<T> = T | { xs?: T; sm?: T; md?: T; lg?: T; xl?: T; };

// Theme system integration
interface Theme {
  palette: object;
  typography: object;
  spacing: (value: number) => string;
  breakpoints: {
    values: { xs: number; sm: number; md: number; lg: number; xl: number };
  };
}

// Styling prop type
type SxProps<T> = object | ((theme: T) => object);

CSS Classes and Utilities

MUI Lab exports CSS classes for theming and styling customization of all active components:

// CSS classes for component styling
import { tabPanelClasses } from '@mui/lab/TabPanel';
import { masonryClasses } from '@mui/lab/Masonry';
import { 
  timelineClasses,
  timelineItemClasses,
  timelineContentClasses,
  timelineDotClasses,
  timelineConnectorClasses,
  timelineSeparatorClasses,
  timelineOppositeContentClasses
} from '@mui/lab';

// CSS class interfaces
interface TabPanelClasses {
  root: string;
  hidden: string;
}

interface MasonryClasses {
  root: string;
}

interface TimelineClasses {
  root: string;
  positionLeft: string;
  positionRight: string;
  positionAlternate: string;
  positionAlternateReverse: string;
}

interface TimelineDotClasses {
  root: string;
  colorGrey: string;
  colorInherit: string;
  colorPrimary: string;
  colorSecondary: string;
  colorError: string;
  colorInfo: string;
  colorSuccess: string;
  colorWarning: string;
  variantFilled: string;
  variantOutlined: string;
}

Deprecated Components

Many components have been moved to dedicated packages but remain available as deprecated stubs that show migration warnings.

// Complete list of deprecated exports (show warnings when used)
export { CalendarPicker, ClockPicker, DatePicker, DateRangePicker, DateTimePicker, TimePicker };
export { DesktopDatePicker, DesktopDateRangePicker, DesktopDateTimePicker, DesktopTimePicker };
export { MobileDatePicker, MobileDateRangePicker, MobileDateTimePicker, MobileTimePicker };
export { StaticDatePicker, StaticDateRangePicker, StaticDateTimePicker, StaticTimePicker };
export { CalendarPickerSkeleton, PickersDay, DateRangePickerDay, MonthPicker, YearPicker };
export { LocalizationProvider, AdapterDateFns, AdapterDayjs, AdapterLuxon, AdapterMoment };
export { TreeView, TreeItem, LoadingButton };

Deprecated Components Migration Guide

Migration Notes

Summary of Deprecated Components

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

  • CalendarPicker, ClockPicker, DatePicker, DateRangePicker, DateTimePicker, TimePicker
  • Desktop/Mobile/Static variants: DesktopDatePicker, DesktopDateRangePicker, DesktopDateTimePicker, DesktopTimePicker, MobileDatePicker, MobileDateRangePicker, MobileDateTimePicker, MobileTimePicker, StaticDatePicker, StaticDateRangePicker, StaticDateTimePicker, StaticTimePicker
  • Date utilities: CalendarPickerSkeleton, PickersDay, DateRangePickerDay, MonthPicker, YearPicker
  • LocalizationProvider and date adapters: AdapterDateFns, AdapterDayjs, AdapterLuxon, AdapterMoment

Tree Components → @mui/x-tree-view:

  • TreeView, TreeItem

Button Enhancement → @mui/material/Button:

  • LoadingButton (functionality now integrated into core Button component)

Migration Example

// Old (deprecated)
import { DatePicker } from '@mui/lab';

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