use existing div

mui · Sep 12, 2022 · c489323 · c489323
1 parent 7955193
commit c489323
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 63 deletions.
diff --git a/packages/x-date-pickers/src/CalendarPicker/CalendarPicker.tsx b/packages/x-date-pickers/src/CalendarPicker/CalendarPicker.tsx
@@ -199,14 +199,17 @@ const CalendarPickerViewTransitionContainer = styled(PickersFadeTransitionGroup,
   name: 'MuiCalendarPicker',
   slot: 'ViewTransitionContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer,
-})<{ ownerState: CalendarPickerProps<any> }>({});
+})<{ ownerState: CalendarPickerProps<any> }>({
+  overflowY: 'hidden',
+});
 
 const CalendarPickerViewContainer = styled('div', {
   name: 'MuiCalendarPicker',
   slot: 'ViewContainer',
   overridesResolver: (props, styles) => styles.viewTransitionContainer,
 })({
   overflowY: 'auto',
+  maxHeight: '100%',
   position: 'relative',
 });
 
@@ -514,67 +517,65 @@ export const CalendarPicker = React.forwardRef(function CalendarPicker<TDate>(
         leftArrowButtonText={leftArrowButtonText}
         rightArrowButtonText={rightArrowButtonText}
       />
-      <CalendarPickerViewContainer ref={scrollerRef}>
-        <CalendarPickerViewTransitionContainer
-          reduceAnimations={reduceAnimations}
-          className={classes.viewTransitionContainer}
-          transKey={openView}
-          ownerState={ownerState}
-        >
-          <div>
-            {openView === 'year' && (
-              <YearPicker
-                {...baseDateValidationProps}
-                {...commonViewProps}
-                autoFocus={autoFocus}
-                date={date}
-                onChange={handleDateYearChange}
-                shouldDisableYear={shouldDisableYear}
-                hasFocus={hasFocus}
-                onFocusedViewChange={handleFocusedViewChange('year')}
-              />
-            )}
-            {openView === 'month' && (
-              <MonthPicker
-                {...baseDateValidationProps}
-                {...commonViewProps}
-                autoFocus={autoFocus}
-                hasFocus={hasFocus}
-                className={className}
-                date={date}
-                onChange={handleDateMonthChange}
-                shouldDisableMonth={shouldDisableMonth}
-                onFocusedViewChange={handleFocusedViewChange('month')}
-              />
-            )}
-
-            {openView === 'day' && (
-              <DayPicker
-                {...calendarState}
-                {...baseDateValidationProps}
-                {...commonViewProps}
-                autoFocus={autoFocus}
-                onMonthSwitchingAnimationEnd={onMonthSwitchingAnimationEnd}
-                onFocusedDayChange={changeFocusedDay}
-                reduceAnimations={reduceAnimations}
-                selectedDays={[date]}
-                onSelectedDaysChange={onSelectedDayChange}
-                shouldDisableDate={shouldDisableDate}
-                shouldDisableMonth={shouldDisableMonth}
-                shouldDisableYear={shouldDisableYear}
-                hasFocus={hasFocus}
-                onFocusedViewChange={handleFocusedViewChange('day')}
-                gridLabelId={gridLabelId}
-                showDaysOutsideCurrentMonth={showDaysOutsideCurrentMonth}
-                dayOfWeekFormatter={dayOfWeekFormatter}
-                renderDay={renderDay}
-                loading={loading}
-                renderLoading={renderLoading}
-              />
-            )}
-          </div>
-        </CalendarPickerViewTransitionContainer>
-      </CalendarPickerViewContainer>
+      <CalendarPickerViewTransitionContainer
+        reduceAnimations={reduceAnimations}
+        className={classes.viewTransitionContainer}
+        transKey={openView}
+        ownerState={ownerState}
+      >
+        <CalendarPickerViewContainer ref={scrollerRef}>
+          {openView === 'year' && (
+            <YearPicker
+              {...baseDateValidationProps}
+              {...commonViewProps}
+              autoFocus={autoFocus}
+              date={date}
+              onChange={handleDateYearChange}
+              shouldDisableYear={shouldDisableYear}
+              hasFocus={hasFocus}
+              onFocusedViewChange={handleFocusedViewChange('year')}
+            />
+          )}
+          {openView === 'month' && (
+            <MonthPicker
+              {...baseDateValidationProps}
+              {...commonViewProps}
+              autoFocus={autoFocus}
+              hasFocus={hasFocus}
+              className={className}
+              date={date}
+              onChange={handleDateMonthChange}
+              shouldDisableMonth={shouldDisableMonth}
+              onFocusedViewChange={handleFocusedViewChange('month')}
+            />
+          )}
+
+          {openView === 'day' && (
+            <DayPicker
+              {...calendarState}
+              {...baseDateValidationProps}
+              {...commonViewProps}
+              autoFocus={autoFocus}
+              onMonthSwitchingAnimationEnd={onMonthSwitchingAnimationEnd}
+              onFocusedDayChange={changeFocusedDay}
+              reduceAnimations={reduceAnimations}
+              selectedDays={[date]}
+              onSelectedDaysChange={onSelectedDayChange}
+              shouldDisableDate={shouldDisableDate}
+              shouldDisableMonth={shouldDisableMonth}
+              shouldDisableYear={shouldDisableYear}
+              hasFocus={hasFocus}
+              onFocusedViewChange={handleFocusedViewChange('day')}
+              gridLabelId={gridLabelId}
+              showDaysOutsideCurrentMonth={showDaysOutsideCurrentMonth}
+              dayOfWeekFormatter={dayOfWeekFormatter}
+              renderDay={renderDay}
+              loading={loading}
+              renderLoading={renderLoading}
+            />
+          )}
+        </CalendarPickerViewContainer>
+      </CalendarPickerViewTransitionContainer>
     </CalendarPickerRoot>
   );
 }) as CalendarPickerComponent;

diff --git a/packages/x-date-pickers/src/YearPicker/YearPicker.tsx b/packages/x-date-pickers/src/YearPicker/YearPicker.tsx
@@ -59,7 +59,6 @@ const YearPickerRoot = styled('div', {
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
-  overflowY: 'auto',
   height: '100%',
   margin: '0 4px',
 });