experimenal layout refactor

Author: arthurbalduini

packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx

@@ -115,6 +115,7 @@ DesktopDateTimePickerLayout.propTypes = {
     PropTypes.object,
   ]),
   value: PropTypes.any,
+  valueType: PropTypes.oneOf(['date-time', 'date', 'time']).isRequired,
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   views: PropTypes.arrayOf(
     PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.tsx

@@ -45,6 +45,7 @@ const MultiSectionDigitalClockRoot = styled(PickerViewRoot, {
   flexDirection: 'row',
   width: '100%',
   borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+  justifyContent: 'space-evenly',
 }));
 
 type MultiSectionDigitalClockComponent = (<TDate extends PickerValidDate>(

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx

@@ -56,9 +56,11 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
 })<{ ownerState: MultiSectionDigitalClockSectionProps<any> & { alreadyRendered: boolean } }>(
   ({ theme }) => ({
     maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
-    width: 56,
+    width: '100%',
     padding: 0,
     overflow: 'hidden',
+    borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
+    scrollbarGutter: 'stable',
     '@media (prefers-reduced-motion: no-preference)': {
       scrollBehavior: 'auto',
     },
@@ -70,8 +72,8 @@ const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
     '@media (pointer: none), (pointer: coarse)': {
       overflowY: 'auto',
     },
-    '&:not(:first-of-type)': {
-      borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
+    '&:first-of-type': {
+      borderColor: 'transparent',
     },
     '&::after': {
       display: 'block',

packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx

@@ -8,7 +8,7 @@ import { PickersLayoutProps } from './PickersLayout.types';
 import { pickersLayoutClasses, getPickersLayoutUtilityClass } from './pickersLayoutClasses';
 import usePickerLayout from './usePickerLayout';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
-import { PickerValidDate } from '../models';
+import { FieldValueType, PickerValidDate } from '../models';
 
 const useUtilityClasses = (ownerState: PickersLayoutProps<any, any, any>) => {
   const { isLandscape, classes } = ownerState;
@@ -73,11 +73,19 @@ export const PickersLayoutContentWrapper = styled('div', {
   name: 'MuiPickersLayout',
   slot: 'ContentWrapper',
   overridesResolver: (props, styles) => styles.contentWrapper,
-})({
+})<{ ownerState?: { valueType: FieldValueType } }>({
   gridColumn: 2,
   gridRow: 2,
   display: 'flex',
   flexDirection: 'column',
+  variants: [
+    {
+      props: { valueType: 'time' },
+      style: {
+        gridColumn: '1/4',
+      },
+    },
+  ],
 });
 
 type PickersLayoutComponent = (<
@@ -105,7 +113,7 @@ const PickersLayout = React.forwardRef(function PickersLayout<
   const props = useThemeProps({ props: inProps, name: 'MuiPickersLayout' });
 
   const { toolbar, content, tabs, actionBar, shortcuts } = usePickerLayout(props);
-  const { sx, className, isLandscape, wrapperVariant } = props;
+  const { sx, className, isLandscape, wrapperVariant, valueType } = props;
 
   const classes = useUtilityClasses(props);
 
@@ -118,7 +126,7 @@ const PickersLayout = React.forwardRef(function PickersLayout<
     >
       {isLandscape ? shortcuts : toolbar}
       {isLandscape ? toolbar : shortcuts}
-      <PickersLayoutContentWrapper className={classes.contentWrapper}>
+      <PickersLayoutContentWrapper ownerState={{ valueType }} className={classes.contentWrapper}>
         {wrapperVariant === 'desktop' ? (
           <React.Fragment>
             {content}
@@ -188,6 +196,7 @@ PickersLayout.propTypes = {
     PropTypes.object,
   ]),
   value: PropTypes.any,
+  valueType: PropTypes.oneOf(['date-time', 'date', 'time']).isRequired,
   view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
   views: PropTypes.arrayOf(
     PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired,

packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts

@@ -70,6 +70,7 @@ export const usePicker = <
   const pickerLayoutResponse = usePickerLayoutProps({
     props,
     wrapperVariant,
+    valueType,
     propsFromPickerValue: pickerValueResponse.layoutProps,
     propsFromPickerViews: pickerViewsResponse.layoutProps,
   });

packages/x-date-pickers/src/internals/hooks/usePicker/usePickerLayoutProps.ts

@@ -1,4 +1,5 @@
 import { useRtl } from '@mui/system/RtlProvider';
+import { FieldValueType } from '../../../models';
 import { useIsLandscape } from '../useIsLandscape';
 import { UsePickerValueLayoutResponse } from './usePickerValue.types';
 import { UsePickerViewsLayoutResponse } from './usePickerViews';
@@ -26,6 +27,7 @@ export interface UsePickerLayoutPropsResponseLayoutProps<
   isLandscape: boolean;
   isRtl: boolean;
   wrapperVariant: WrapperVariant;
+  valueType: FieldValueType;
   isValid: (value: TValue) => boolean;
 }
 
@@ -38,6 +40,7 @@ export interface UsePickerLayoutPropsParams<TValue, TView extends DateOrTimeView
   propsFromPickerValue: UsePickerValueLayoutResponse<TValue>;
   propsFromPickerViews: UsePickerViewsLayoutResponse<TView>;
   wrapperVariant: WrapperVariant;
+  valueType: FieldValueType;
 }
 
 /**
@@ -48,6 +51,7 @@ export const usePickerLayoutProps = <TValue, TView extends DateOrTimeViewWithMer
   propsFromPickerValue,
   propsFromPickerViews,
   wrapperVariant,
+  valueType,
 }: UsePickerLayoutPropsParams<TValue, TView>): UsePickerLayoutPropsResponse<TValue, TView> => {
   const { orientation } = props;
   const isLandscape = useIsLandscape(propsFromPickerViews.views, orientation);
@@ -59,6 +63,7 @@ export const usePickerLayoutProps = <TValue, TView extends DateOrTimeViewWithMer
     isLandscape,
     isRtl,
     wrapperVariant,
+    valueType,
     disabled: props.disabled,
     readOnly: props.readOnly,
   };