Improve pickers composition

[Pajn]

Is your feature request related to a problem? Please describe.
It's very hard to impossible to customize the components in any way making them unusable if the default behavior does not exactly match the requirements.

Describe the solution you'd like
Like core, add *Component props to allow overriding any inner components and also export the inner components used in this library so that one can make use of them when implementing overrides.

Describe alternatives you've considered
There aren't really any. I could make separate feature requests for the behavior I need right now but even if all of them gets implemented I would feel a bit uneasy to use this library as any future requirement might require the whole solution to be rewritten in something else.

Additional context
See how the mui Dialog component allows overriding the Backdrop, Paper and Transition components

[oliviertassinari]

@Pajn Could you share more details on your use case? What do you wish to accomplish? Which component do you need to customize?

[Pajn]

Right now I would need to add extra controls inside the popup for DesktopDateRangePicker.
makeRangePicker is exported so if DesktopPopperWrapper also was exported I think I could create a custom wrapper to archive what I want by wrapping DesktopPopperWrapper but being familiar with core I would have expected props like DateRangePickerViewComponent, DateRangePickerViewProps (which in turn has DateRangePickerViewDesktopComponent), ToolbarComponent, CalendarComponent etc. Core also provides all files in the npm package instead of a big bundle so I have never experienced not being able to import an inner component before, even though it might not be exported from the top level module.

Now, according to the types, ToolbarComponent does exists but it does not seem to do anything and https://github.com/mui-org/material-ui-pickers/blob/6cde0eaf11531d10667d9f4d78bbcb9b3d51763f/lib/src/DateRangePicker/DateRangePickerView.tsx#L195 directly renders the imported component which would explain that.

[oliviertassinari]

@Pajn If you could share a visual preview of what you are going after, it will help

[oliviertassinari]

Regarding the consistency with the core, you can follow mui/material-ui#19706 and #1631 which can help.

[Pajn]

Right now it was this:

I have solved my immediate problem with overriding the transition component and doing some hacky things with inspecting and cloning children:

const TransitionOverride = forwardRef(
  (transitionProps: TransitionProps & { children?: any }, ref) => (
    <Grow {...transitionProps} ref={ref}>
      {cloneElement(transitionProps.children, {
        children: (
          <div style={{ display: 'flex' }}>
            <CommonlyUsed />
            {transitionProps.children?.props.children}
          </div>
        ),
      })}
    </Grow>
  ),
);

It's more the general case I am concerned about. This was harder than it should have been and can easily imagine requirements that might come that I yet does not now how to solve. For example, week numbers or date/time range picking. If I could override and import the Calender component I could easily wrap it and add extra controls around each calendar.

[dmtrKovalenko]

For the custom wrapper components, we specifically expose the Static version of components.

So if you want to build custom wrapper, you can do the following

<Popper>
    <StaticDateRangePicker />
   <DialogActions>
       ...your controls
   </DialogActions>
</Popper>

Moreover pickers properly expose the components

And also you can pass any props down to the MuiComponents using PopperProps or PopoverProps or DialogProps. So I think we can close this issue

[oliviertassinari]

@Pajn Ok thanks, we track this shortcut feature in #1659. Also, be careful with your use case for the component, please mind #364 (comment).

[oliviertassinari]

So if you want to build custom wrapper, you can do the following

@dmtrKovalenko Would this be enough? I believe the integration with an input is not obvious. Maybe we would need a new demo or abstraction?

[aamirafridi]

@oliviertassinari I think this issue should be reopened as well.
ToolbarComponent prop is still not working with the latest alpha.12 https://codesandbox.io/s/material-ui-date-range-xy8yx

[oliviertassinari]

Closing as too ambitious compared to our bandwidth and the other problems we need to fix