[StaticDatePicker] Add className and slot to PickerStaticWrapper

packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BaseDatePickerProps, useDatePickerDefaultizedProps } from '../DatePicker/shared';
 import DatePickerToolbar from '../DatePicker/DatePickerToolbar';
-import StaticWrapper, { StaticWrapperProps } from '../internal/pickers/wrappers/StaticWrapper';
+import PickerStaticWrapper, {
+  PickerStaticWrapperProps,
+} from '../internal/pickers/wrappers/PickerStaticWrapper';
 import Picker from '../internal/pickers/Picker/Picker';
 import { MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
 import { useDateValidation } from '../internal/pickers/hooks/useValidation';
@@ -20,7 +22,7 @@ export interface StaticDatePickerProps<TDate = unknown> extends BaseDatePickerPr
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
    * @default 'mobile'
    */
-  displayStaticWrapperAs?: StaticWrapperProps['displayStaticWrapperAs'];
+  displayStaticWrapperAs?: PickerStaticWrapperProps['displayStaticWrapperAs'];
 }
 
 type StaticDatePickerComponent = (<TDate>(
@@ -62,15 +64,15 @@ const StaticDatePicker = React.forwardRef(function StaticDatePicker<TDate>(
   const DateInputProps = { ...inputProps, ...other, ref, validationError };
 
   return (
-    <StaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
+    <PickerStaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
       <Picker
         {...pickerProps}
         toolbarTitle={props.label || props.toolbarTitle}
         ToolbarComponent={ToolbarComponent}
         DateInputProps={DateInputProps}
         {...other}
       />
-    </StaticWrapper>
+    </PickerStaticWrapper>
   );
 }) as StaticDatePickerComponent;
 

packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import StaticWrapper, { StaticWrapperProps } from '../internal/pickers/wrappers/StaticWrapper';
+import PickerStaticWrapper, {
+  PickerStaticWrapperProps,
+} from '../internal/pickers/wrappers/PickerStaticWrapper';
 import { useDefaultDates, useUtils } from '../internal/pickers/hooks/useUtils';
 import { RangeInput, DateRange } from '../DateRangePicker/RangeTypes';
 import {
@@ -73,7 +75,7 @@ export interface StaticDateRangePickerProps<TDate = unknown>
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
    * @default 'mobile'
    */
-  displayStaticWrapperAs?: StaticWrapperProps['displayStaticWrapperAs'];
+  displayStaticWrapperAs?: PickerStaticWrapperProps['displayStaticWrapperAs'];
 }
 
 type StaticDateRangePickerComponent = (<TDate>(
@@ -151,7 +153,7 @@ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TD
   };
 
   return (
-    <StaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
+    <PickerStaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
       <DateRangePickerView<any>
         open={wrapperProps.open}
         DateInputProps={DateInputProps}
@@ -163,7 +165,7 @@ const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker<TD
         {...pickerProps}
         {...restProps}
       />
-    </StaticWrapper>
+    </PickerStaticWrapper>
   );
 }) as StaticDateRangePickerComponent;
 

packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx

@@ -5,7 +5,9 @@ import {
   useDateTimePickerDefaultizedProps,
 } from '../DateTimePicker/shared';
 import DateTimePickerToolbar from '../DateTimePicker/DateTimePickerToolbar';
-import StaticWrapper, { StaticWrapperProps } from '../internal/pickers/wrappers/StaticWrapper';
+import PickerStaticWrapper, {
+  PickerStaticWrapperProps,
+} from '../internal/pickers/wrappers/PickerStaticWrapper';
 import Picker from '../internal/pickers/Picker/Picker';
 import { MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
 import { useDateTimeValidation } from '../internal/pickers/hooks/useValidation';
@@ -23,7 +25,7 @@ export interface StaticDateTimePickerProps<TDate = unknown> extends BaseDateTime
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
    * @default 'mobile'
    */
-  displayStaticWrapperAs?: StaticWrapperProps['displayStaticWrapperAs'];
+  displayStaticWrapperAs?: PickerStaticWrapperProps['displayStaticWrapperAs'];
 }
 
 type StaticDateTimePickerComponent = (<TDate>(
@@ -65,15 +67,15 @@ const StaticDateTimePicker = React.forwardRef(function StaticDateTimePicker<TDat
   const DateInputProps = { ...inputProps, ...other, ref, validationError };
 
   return (
-    <StaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
+    <PickerStaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
       <Picker
         {...pickerProps}
         toolbarTitle={props.label || props.toolbarTitle}
         ToolbarComponent={ToolbarComponent}
         DateInputProps={DateInputProps}
         {...other}
       />
-    </StaticWrapper>
+    </PickerStaticWrapper>
   );
 }) as StaticDateTimePickerComponent;
 

packages/mui-lab/src/StaticTimePicker/StaticTimePicker.tsx

@@ -2,7 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BaseTimePickerProps, useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import TimePickerToolbar from '../TimePicker/TimePickerToolbar';
-import StaticWrapper, { StaticWrapperProps } from '../internal/pickers/wrappers/StaticWrapper';
+import PickerStaticWrapper, {
+  PickerStaticWrapperProps,
+} from '../internal/pickers/wrappers/PickerStaticWrapper';
 import Picker from '../internal/pickers/Picker/Picker';
 import { MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
 import { useTimeValidation } from '../internal/pickers/hooks/useValidation';
@@ -20,7 +22,7 @@ export interface StaticTimePickerProps<TDate = unknown> extends BaseTimePickerPr
    * Force static wrapper inner components to be rendered in mobile or desktop mode.
    * @default 'mobile'
    */
-  displayStaticWrapperAs?: StaticWrapperProps['displayStaticWrapperAs'];
+  displayStaticWrapperAs?: PickerStaticWrapperProps['displayStaticWrapperAs'];
 }
 
 type StaticTimePickerComponent = (<TDate>(
@@ -60,7 +62,7 @@ const StaticTimePicker = React.forwardRef(function StaticTimePicker<TDate>(
   const DateInputProps = { ...inputProps, ...other, ref, validationError };
 
   return (
-    <StaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
+    <PickerStaticWrapper displayStaticWrapperAs={displayStaticWrapperAs}>
       {/* @ts-ignore time picker has no component slot for the calendar header */}
       <Picker
         {...pickerProps}
@@ -69,7 +71,7 @@ const StaticTimePicker = React.forwardRef(function StaticTimePicker<TDate>(
         DateInputProps={DateInputProps}
         {...other}
       />
-    </StaticWrapper>
+    </PickerStaticWrapper>
   );
 }) as StaticTimePickerComponent;
 

packages/mui-lab/src/internal/pickers/wrappers/PickerStaticWrapper.test.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { createRenderer, describeConformance } from 'test/utils';
+import PickerStaticWrapper, { pickerStaticWrapperClasses as classes } from './PickerStaticWrapper';
+
+describe('<PickerStaticWrapper />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<PickerStaticWrapper displayStaticWrapperAs="mobile" />, () => ({
+    classes,
+    muiName: 'MuiPickerStaticWrapper',
+    refInstanceof: undefined,
+    render,
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'themeVariants',
+      'propsSpread',
+      'refForwarding',
+      'rootClass',
+    ],
+  }));
+});

packages/mui-lab/src/internal/pickers/wrappers/PickerStaticWrapper.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { styled, useThemeProps } from '@mui/material/styles';
+import {
+  unstable_composeClasses as composeClasses,
+  generateUtilityClass,
+  generateUtilityClasses,
+} from '@mui/base';
+import { DIALOG_WIDTH } from '../constants/dimensions';
+import { WrapperVariantContext, IsStaticVariantContext } from './WrapperVariantContext';
+
+export interface PickerStaticWrapperClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+
+export type PickerStaticWrapperClassKey = keyof PickerStaticWrapperClasses;
+
+export function getStaticWrapperUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiPickerStaticWrapper', slot);
+}
+
+export const pickerStaticWrapperClasses: PickerStaticWrapperClasses = generateUtilityClasses(
+  'MuiPickerStaticWrapper',
+  ['root'],
+);
+
+const useUtilityClasses = (ownerState: PickerStaticWrapperProps) => {
+  const { classes } = ownerState;
+  const slots = {
+    root: ['root'],
+  };
+
+  return composeClasses(slots, getStaticWrapperUtilityClass, classes);
+};
+
+export interface PickerStaticWrapperProps {
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<PickerStaticWrapperClasses>;
+  /**
+   * Force static wrapper inner components to be rendered in mobile or desktop mode.
+   */
+  displayStaticWrapperAs: 'desktop' | 'mobile';
+}
+
+const PickerStaticWrapperRoot = styled('div', {
+  name: 'MuiPickerStaticWrapper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+  skipSx: true,
+})(({ theme }) => ({
+  overflow: 'hidden',
+  minWidth: DIALOG_WIDTH,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: theme.palette.background.paper,
+}));
+
+function PickerStaticWrapper(inProps: PickerStaticWrapperProps) {
+  const props = useThemeProps({ props: inProps, name: 'MuiPickerStaticWrapper' });
+  const { displayStaticWrapperAs, ...other } = props;
+
+  const classes = useUtilityClasses(props);
+
+  const isStatic = true;
+
+  return (
+    <IsStaticVariantContext.Provider value={isStatic}>
+      <WrapperVariantContext.Provider value={displayStaticWrapperAs}>
+        <PickerStaticWrapperRoot className={classes.root} {...other} />
+      </WrapperVariantContext.Provider>
+    </IsStaticVariantContext.Provider>
+  );
+}
+
+export default PickerStaticWrapper;

packages/mui-lab/src/themeAugmentation/components.d.ts

@@ -106,6 +106,11 @@ export interface LabComponents {
     styleOverrides?: ComponentsOverrides['MuiYearPicker'];
     variants?: ComponentsVariants['MuiYearPicker'];
   };
+  MuiPickerStaticWrapper?: {
+    defaultProps?: ComponentsProps['MuiPickerStaticWrapper'];
+    styleOverrides?: ComponentsOverrides['MuiPickerStaticWrapper'];
+    variants?: ComponentsVariants['MuiPickerStaticWrapper'];
+  };
 }
 
 declare module '@mui/material/styles' {

packages/mui-lab/src/themeAugmentation/overrides.d.ts

@@ -17,6 +17,7 @@ import { TimelineSeparatorClassKey } from '../TimelineSeparator';
 import { TreeItemClassKey } from '../TreeItem';
 import { TreeViewClassKey } from '../TreeView';
 import { YearPickerClassKey } from '../YearPicker';
+import { PickerStaticWrapperClassKey } from '../internal/pickers/wrappers/PickerStaticWrapper';
 
 // prettier-ignore
 export interface LabComponentNameToClassKey {
@@ -39,6 +40,7 @@ export interface LabComponentNameToClassKey {
   MuiTreeItem: TreeItemClassKey;
   MuiTreeView: TreeViewClassKey;
   MuiYearPicker: YearPickerClassKey;
+  MuiPickerStaticWrapper: PickerStaticWrapperClassKey;
 }
 
 declare module '@mui/material/styles' {