Update scroll area

[AnnMarieW]

closes #644

• Adds ScrollAreaAutosize component
• Adds scrollTo prop to ScrollArea

New scrollTo options:

• top – vertical position in percent (0–100),
• left – horizontal position in percent (0–100), -
• behavior – scroll behavior: auto (instant) or smooth (animated), auto by default

Update - in an earlier version I tried to include an option to scroll to element. However it scrolled the entire page, rather than just the scrollArea, so I removed the feature.

PR for docs (includes examples for both ScrollAreaAutosize component and scrollTo prop) : snehilvj/dmc-docs#243

[alexcjohnson]

Feels a little funny to me that these numbers are percentages when this interface otherwise LOOKS identical to the underlying scrollTo API that takes pixels. Would it make sense to allow both numbers (treated as pixels) and strings like "100%"?

[AnnMarieW]

oh, yes, that would be much better! Thanks, I'll add that.

[AnnMarieW]

Here's a sample app to try the scroll to px (number) or to percentage (string)

import dash_mantine_components as dmc
from dash import Dash, Input, Output

app = Dash()

component = dmc.ScrollArea(
        h=250,
        w=350,
        id="scrollArea",
        children=[
            dmc.Paper(
                w=600,
                children=[
                    dmc.Title(f"Section {i}", order=3, mt="lg", id=f"section-{i}"),
                    dmc.Text("This is a sentence.   " * 10)
                ]
            )
            for i in range(10)
        ]
    )

# Use this to try number of px
controls = dmc.Group([
    dmc.NumberInput(label="X position in px", value=0, id="x-position"),
    dmc.NumberInput(label="Y position in px",  value=0, id="y-position"),
])

#  Use this to try percentages
# controls = dmc.Group([
#     dmc.Select(label="X position as percentage (string)", id="x-position", data=[f"{i}%" for i in range(0,101, 25)], value="0%"),
#     dmc.Select(label="Y position as percentage (string)", id="y-position", data=[f"{i}%" for i in range(0,101, 25)], value="0%"),
# ])


app.layout = dmc.MantineProvider([
    controls,
    component
])

@app.callback(
    Output("scrollArea", "scrollTo"),
    Input("x-position", "value"),
    Input("y-position", "value"),
)
def scroll_to(x,y):
    return {"top": x, "left": y}

if __name__ == "__main__":
    app.run(debug=True)