diff --git a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview b/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview deleted file mode 100644 index cff735f8a7af0..0000000000000 --- a/docs/data/date-pickers/custom-field/PickerWithJoyField.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js similarity index 79% rename from docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js rename to docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js index ea7512ace1590..0e849ab1228c0 100644 --- a/docs/data/date-pickers/custom-field/PickerWithAutocompleteField.js +++ b/docs/data/date-pickers/custom-field/behavior-autocomplete/MaterialDatePicker.js @@ -6,19 +6,31 @@ import Stack from '@mui/material/Stack'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { useSplitFieldProps } from '@mui/x-date-pickers/hooks'; +import { useValidation, validateDate } from '@mui/x-date-pickers/validation'; function AutocompleteField(props) { + const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); + const { value, timezone, onChange } = internalProps; const { + InputProps, + slotProps, + slots, + ownerState, label, - disabled, - readOnly, - id, - value, - onChange, - InputProps: { ref, startAdornment, endAdornment } = {}, - inputProps, + focused, + name, options = [], - } = props; + inputProps, + ...other + } = forwardedProps; + + const { hasValidationError } = useValidation({ + validator: validateDate, + value, + timezone, + props: internalProps, + }); const mergeAdornments = (...adornments) => { const nonNullAdornments = adornments.filter((el) => el != null); @@ -41,25 +53,24 @@ function AutocompleteField(props) { return ( ( , - BaseSingleInputFieldProps< - Dayjs | null, - Dayjs, - FieldSection, - true, - DateValidationError - > { +interface AutocompleteFieldProps extends DatePickerFieldProps { /** * @typescript-to-proptypes-ignore */ options?: Dayjs[]; } -function AutocompleteField(props: AutoCompleteFieldProps) { +function AutocompleteField(props: AutocompleteFieldProps) { + const { internalProps, forwardedProps } = useSplitFieldProps(props, 'date'); + const { value, timezone, onChange } = internalProps; const { + InputProps, + slotProps, + slots, + ownerState, label, - disabled, - readOnly, - id, - value, - onChange, - InputProps: { ref, startAdornment, endAdornment } = {}, - inputProps, + focused, + name, options = [], - } = props; + inputProps, + ...other + } = forwardedProps; + + const { hasValidationError } = useValidation({ + validator: validateDate, + value, + timezone, + props: internalProps, + }); const mergeAdornments = (...adornments: React.ReactNode[]) => { const nonNullAdornments = adornments.filter((el) => el != null); @@ -62,25 +64,24 @@ function AutocompleteField(props: AutoCompleteFieldProps) { return ( ( + !optionsLookup[date.startOf('day').toISOString()]} @@ -138,7 +139,7 @@ function AutocompleteDatePicker(props: AutocompleteDatePickerProps) { const today = dayjs().startOf('day'); -export default function PickerWithAutocompleteField() { +export default function MaterialDatePicker() { return ( diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx index c832d14145530..42b3fb00e8c75 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx +++ b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx @@ -100,6 +100,8 @@ const GridVirtualScrollbar = React.forwardRef { diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts index 067d013bb0065..edd401c720900 100644 --- a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts +++ b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts @@ -60,8 +60,6 @@ export const useGridScroll = ( const logger = useGridLogger(apiRef, 'useGridScroll'); const colRef = apiRef.current.columnHeadersContainerRef; const virtualScrollerRef = apiRef.current.virtualScrollerRef!; - const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef!; - const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef!; const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector); const scrollToIndexes = React.useCallback( @@ -156,37 +154,19 @@ export const useGridScroll = ( const scroll = React.useCallback( (params: Partial) => { - if ( - virtualScrollerRef.current && - virtualScrollbarHorizontalRef.current && - params.left !== undefined && - colRef.current - ) { + if (virtualScrollerRef.current && params.left !== undefined && colRef.current) { const direction = isRtl ? -1 : 1; colRef.current.scrollLeft = params.left; virtualScrollerRef.current.scrollLeft = direction * params.left; - virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left; logger.debug(`Scrolling left: ${params.left}`); } - if ( - virtualScrollerRef.current && - virtualScrollbarVerticalRef.current && - params.top !== undefined - ) { + if (virtualScrollerRef.current && params.top !== undefined) { virtualScrollerRef.current.scrollTop = params.top; - virtualScrollbarVerticalRef.current.scrollTop = params.top; logger.debug(`Scrolling top: ${params.top}`); } logger.debug(`Scrolling, updating container, and viewport`); }, - [ - virtualScrollerRef, - virtualScrollbarHorizontalRef, - virtualScrollbarVerticalRef, - isRtl, - colRef, - logger, - ], + [virtualScrollerRef, isRtl, colRef, logger], ); const getScrollPosition = React.useCallback(() => {