Add Splitter component

[josgraha]

As an MUI developer, I would like a Splitter component so I can create draggable dividers in UI regions as per the Material Design spec below.
https://material.io/design/layout/responsive-layout-grid.html#ui-regions

Expected Behavior 🤔

The expected behavior should be a draggable divider where the panes adhere to the Material spec responsive patterns.
https://material.io/design/layout/component-behavior.html#responsive-patterns

The draggable divider should adhere to the Material design standards for "Drag" gesture
https://material.io/design/interaction/gestures.html#types-of-gestures

Current Behavior 😯

Currently there is not a splitter component in the component list or roadmap so this will be a "Labs" component.

Examples 🌈

This component will be a fork of the react-split-pane component as a starting point. The examples can be found here.

Context 🔦

We hope that by forking the react-split-pane component and supporting desktop use cases for interacting with UI regions we can join the Responsive Patterns and the Drag Gesture Material Designs into a cohesive experience for users with large screen sizes, 7+ (greater than 7 inch diagonal) as it is referred to in the USA. We also hope to combine the API of the m-react-splitters with the stability and quality of react-split-pane but by initially forking the stable react-split-pane we will have a good starting point to evolve future requirements.
We also feel that the exceptional quality of the MUI project configuration and build tooling will be a great platform for future exploration and evolution of this API.

Benchmark

• View: https://mui-org.notion.site/Window-splitter-component-cf1bd8b84b85429b8cc2fcb860d617dd
• Edit: https://www.notion.so/Window-splitter-component-cf1bd8b84b85429b8cc2fcb860d617dd

Related

• New Resizer/Splitter component formaat-design/reshaped#249

[oliviertassinari]

@josgraha Do you have something like this in mind https://v1.quasar-framework.org/vue-components/splitter?

[sjlongland]

I just dropped the current stable release of react-split-pane in and it worked like a charm… is much more really needed?

[josgraha]

@mbrookes @oliviertassinari I am going to raise a PR on this. The idea is to fork react-split-pane because they are not a fan of hooks or mono-repos and it would be nice to evolve to a more ambitious API in the future. I also think the demos are easier to follow here and certainly easier to get up and running. I think react-split-pane was brilliantly executed but prior to the last release the site was down and it was poor DX to run the examples. I don't blame react-split-pane and given how much effort it is to maintain a public repo like this a tooling pivot or uplifting tech would require a lot of resources on an already under-resourced project.

[oliviertassinari]

@josgraha react-split-pane seems to be decent enough. Given the number of stars, we will probably not accept any pull request on our lab until people upvote this issue in a significant way. We have different priorities, for now :).

[josgraha]

thanks so much for the discussion, great suggestions too.

[josgraha]

@josgraha Do you have something like this in mind v1.quasar-framework.org/vue-components/splitter?

nice api, thanks!

[jmynes]

I hope this gets merged, a Splitter component would be very useful.

Have you seen this repo? It is much more recently updated than react-split-pane:
https://github.com/bvaughn/react-resizable-panels

It was linked in the related issue #13931 (comment)

And is used by shadcn:
https://ui.shadcn.com/docs/components/resizable